diff options
| author | Rodrigo Arias Mallo <rodarima@gmail.com> | 2025-03-22 22:57:06 +0100 |
|---|---|---|
| committer | Rodrigo Arias Mallo <rodarima@gmail.com> | 2025-03-23 14:24:12 +0100 |
| commit | 7c0a764bb7c68f10cc58c0edf8b65b74495c1401 (patch) | |
| tree | f3b55bc544c69f47c660732fc6d85d88c484df35 | |
| parent | 8ecba6b9ed637978915c29b6b5f3116759395fbc (diff) | |
Add topic guide and playing multimedia article
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | style.css | 18 | ||||
| -rw-r--r-- | topic/index.html | 35 | ||||
| -rw-r--r-- | topic/playing-multimedia/dillo-tv.png | bin | 0 -> 76607 bytes | |||
| -rw-r--r-- | topic/playing-multimedia/index.html | 166 |
5 files changed, 229 insertions, 5 deletions
@@ -93,6 +93,21 @@ table { margin: 1.5em; } The domain <code>dillo.org</code> is <a href="dillo.org.html">no longer under control</a> of Dillo developers. </p> + <h2>Documentation</h2> + <p>There are several pieces of documentation available, it is recommended + that users read the User Manual and the Topic Guide. + <ul> + <li><a href="/user_help.html">User Manual</a>: Read it to discover how to + use all the features. It is distributed with the browser so it can be + read locally. + </li> + <li><a href="/topic/index.html">Topic Guide</a>: Provides extra details on + additional topics that are not covered by the manual, like how to + configure Dillo and mpv to open multimedia files from URLs.</li> + <li><a href="/doxygen/index.html">Developer Documentation</a>: Describes + the internal design and implementation of the browser and it is + recommended for developers.</li> + </ul> <h2>Download</h2> <p>Download the <a href="release/3.2.0">latest release 3.2.0</a> and follow the <code>README.md</code> @@ -1,12 +1,10 @@ body { background: white; line-height: 1.5; - margin: 3em; + margin: 3em auto; + padding: 0 3em; /* Fix for Dillo */ font-family: sans-serif; -} -.main { - margin: 2em auto; - width: 50em; + max-width: 72ch; } h1 { margin-top: 0.25em; @@ -22,6 +20,16 @@ figure { text-align: center; margin: 1em; } +footer { + text-align: center; + margin-top: 2em; + clear: both; +} +pre { + padding: 0.25em; + background: #f7f7f7; + border-left: solid 2px #ccc; +} .date { font-style: italic; float: right; diff --git a/topic/index.html b/topic/index.html new file mode 100644 index 0000000..b26915c --- /dev/null +++ b/topic/index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Topic Guide</title> + <link rel="icon" type="image/png" href="/img/favicon.png"> + <link rel="stylesheet" href="/style.css"> + </head> + <body> +<header> + <span class="date">Updated on 2025-03-23</span> + <nav> + <a href="/">Home</a> / + <a href="/topic">Topic Guide</a> + </nav> +</header> +<main class="main"> + <h1>Topic Guide</h1> + <p>This page contains a list of guides on special topics the are not covered + in the <a href="/user_help.html">Dillo manual</a>. While the manual puts the + main focus on the browser and its features, some other topics require + additional pieces of software so they are better covered in an different + place. + <article> + <h2><a href="playing-multimedia">Playing multimedia</a></h2> + <p>While Dillo cannot play video or audio directly from the browser, it can + <em>easily</em> offload this task to other programs. This article covers how + to setup mpv with yt-dlp to be able to watch YouTube videos or listen to + Bandcamp albums by opening the URLs directly from Dillo. + </article> +</main> +<footer> +<a href="../index.html">← Home</a> +</footer> +</html> diff --git a/topic/playing-multimedia/dillo-tv.png b/topic/playing-multimedia/dillo-tv.png Binary files differnew file mode 100644 index 0000000..b9caa63 --- /dev/null +++ b/topic/playing-multimedia/dillo-tv.png diff --git a/topic/playing-multimedia/index.html b/topic/playing-multimedia/index.html new file mode 100644 index 0000000..26f2771 --- /dev/null +++ b/topic/playing-multimedia/index.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Playing multimedia with Dillo</title> + <link rel="icon" type="image/png" href="/img/favicon.png"> + <link rel="stylesheet" href="/style.css"> + </head> + <body> +<header> + <span class="date">Written on 2025-03-16</span> + <nav> + <a href="/">Home</a> / + <a href="/topic">Topic Guide</a> / + <a href="/topic/playing-multimedia">Playing multimedia</a> + </nav> +</header> +<main> + <h1>Playing multimedia with Dillo</h1> + <p>Dillo doesn't have the capability to play audio or video directly from the + browser, however it can <em>easily</em> offload this task to other programs. + This page collects some examples of how to do watch videos and listen to audio + tracks or podcasts by using an external player program. In particular we will + cover mpv with yt-dlp which supports YouTube and Bandcamp among many other + sites. + <img src="dillo-tv.png" alt="A black and white drawing of an armadillo + watching a futuristic looking TV playing the famous video of Rick + Astley, Never Gonna Give You Up"> + </p> + <h2>Requisites</h2> + <p>You will need at least Dillo + <a href="/release/3.2.0/">version 3.2.0</a> to open URLs in external + programs, be sure to install an <a href="/release">updated version</a> or + built it yourself from source.</p> + <p>To play multimedia files you will also need + <a href="https://mpv.io/">mpv</a> along with + <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a> tool to extract video + and audio streams from + <a + href="https://raw.githubusercontent.com/yt-dlp/yt-dlp/master/supportedsites.md">several + sites</a>. + There are other alternatives, but these are the ones I have tested and they + seem to work fine. Be sure to use an <b>updated version</b> of yt-dlp, as it + is likely that old versions don't work anymore.</p> + + <h2>Opening URLs in mpv</h2> + <p>Apart from opening video and audio URLs, <a href="https://mpv.io/">Mpv</a> can + also open URLs that contain embedded video or audio elements by extracting the + relevant sources from the website with the help of + <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a> + under the hood. For example, a YouTube video can be directly opened like so: + <blockquote> + <pre>$ mpv '<a href="https://www.youtube.com/watch?v=ZZ5LpwO-An4">https://www.youtube.com/watch?v=ZZ5LpwO-An4</a>'</pre> + </blockquote> + As well as any Bandcamp album: + <blockquote> + <pre>$ mpv '<a href="https://tokyoskaparadiseorchestra.bandcamp.com/album/35">https://tokyoskaparadiseorchestra.bandcamp.com/album/35</a>'</pre> + </blockquote> + <p>When opening <em>audio</em> files, mpv won't show a new window and will read + the input keys from the stdin of the console. As we will be using Dillo to run + mpv, we change the <code>force-window</code> option to always open a window by + setting in the <code>~/.config/mpv/mpv.conf</code> config file this option: + <blockquote> + <pre>force-window=yes</pre> + </blockquote> + <p>You can also specify this option from the command line if you prefer to do it + only for Dillo. You may want to also specify other options regarding the + quality of videos, see the <a href="man:mpv(1)">mpv(1) manual page</a>.</p> + + <p>In order to open an URL in mpv, we simply add this line to the + <code>~/.dillo/dillorc</code> config file: + <blockquote> + <pre>link_action="Open in mpv:mpv $url &"</pre> + </blockquote> + The <code>$url</code> variable is set by Dillo to the value of the URL of the + hyperlink. The <code>&</code> (ampersand) at the end ensures that when + Dillo is closed, the mpv process continues running. + <p>You will need to close Dillo and open it again for the changes to + take effect. Now when you are over a link, you can click with the right + mouse button and select the new <em>Open in mpv</em> option, and the link + should be opened by mpv. You can try with the above two links. + + <p>To search, consider using an alternative YouTube frontend like + <a href="https://yewtu.be">Invidious</a> which doesn't need JavaScript.</p> + + <h2>Playing URLs in a queue</h2> + <p>While opening a single video or audio URL is helpful, often multiple + videos or audio links are intended to be opened in sequence. This can be + achieved by using the <a href="man:mpv#JSON_IPC">mpv control socket</a> and a + small script that queues them in the current playlist (there are other tools, + but this method has almost no extra requirements). To use this technique + you will need to install the + <a href="http://www.dest-unreach.org/socat/">socat</a> program as well, to + communicate with the UNIX socket. + <p>We will add two modes of playing elements, play next in the queue or add at + the end of the queue. The <code>$url</code> variable will provide the URL that + we should open, and the first argument will control where it gets added in the + queue. With mpv, this is controlled by the <code>loadfile</code> command, + which accepts the <code>insert-next</code> and <code>append-next</code> options. + <p>Create the <code>~/.dillo/mpv/</code> directory and place the following + script in the file <code>~/.dillo/mpv/queue.sh</code>, and make it executable + with <code>chmod +x ~/.dillo/mpv/queue.sh</code>: + <blockquote><pre>#!/bin/sh + +if [ -z "$url" ]; then + echo "error: url not set" >&2 + exit 1 +fi + +mode=${1:-append-next} +sockfile=~/.dillo/mpv/mpv.sock +conffile=~/.dillo/mpv/mpv.conf + +# Try queueing it by appending it, see loadfile in mpv(1) manual +echo "loadfile $url $mode" | socat - "UNIX-CONNECT:$sockfile" && exit 0 + +# Otherwise start a new mpv server in the background +mpv --include="$conffile" --input-ipc-server="$sockfile" "$url" & +</pre></blockquote> + + <p>Additionally, create a custom mpv configuration file at + <code>~/.dillo/mpv/mpv.conf</code> with the following content: + <blockquote><pre># Always show the player window even if it is only audio +force-window=yes + +# Keep the player open after playing all files +idle=yes + +# Select small video formats (optional) +# ytdl-format="best[height<500]"</pre></blockquote> + <p>You can add more options that will only affect mpv when running in this + queued mode, for example to disable video and only play audio which would + reduce bandwidth usage, but these are enough for now. + + <p>Then add these two new actions in <code>~/.dillo/dillorc</code> to play + files in the queue and restart Dillo: + + <blockquote> + <pre>link_action="Queue next in mpv:~/.dillo/mpv/queue.sh insert-next" +link_action="Queue last in mpv:~/.dillo/mpv/queue.sh append-play"</pre> + </blockquote> + + <p>The first time that you queue an URL, a new instance of mpv will start which + will setup the socket, and will remain opened even if the file ends. Succesive + URLs will be added to the playlist at the specified position.</p> + + <p>Notice that the mpv program is running in the background, and if you close + Dillo it will continue playing. You can in fact open Dillo later and queue + more items and so on.</p> + + <h2>Closing remarks</h2> + <p>The <code>queue.sh</code> script always opens all URLs in the same way, but + you could handle different URLs in different ways. The <code>$origin</code> + variable is also available with the value of the URL <em>from</em> which the + link was opened, which can also be used to determine how to load the URL.</p> + <p>You can also add more options, for example to handle audio and video + separately with different mpv options for each type, or particular options for + your hardware to better use the video hardware decoder (if present).</p> + <p>Finally, this technique works for any other program that can handle URLs + which can be configured to be used with Dillo in the same way.</p> +</main> +<footer> +<a href="../index.html">← Back</a> +</footer> + </body> +</html> |
