Difference between revisions of "Preparing videos for blog posts"

From postmarketOS
Jump to: navigation, search
(Shortening: fix time again)
(Embed into a post: just writing "video" instead of "full video" is enough, people will figure it out, and it takes up less space)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
Here's a short cheat sheet of how to get videos ready for blog posts. We convert them to the widely supported {{wikipedia|webm}} ({{wikipedia|mp4}} will for example not work on Fedora out of the box), and create short and smaller video thumbnails. These thumbnails will be embedded into the blog post directly as little animated pictures, just like gifs, but much more size efficient.
 
Here's a short cheat sheet of how to get videos ready for blog posts. We convert them to the widely supported {{wikipedia|webm}} ({{wikipedia|mp4}} will for example not work on Fedora out of the box), and create short and smaller video thumbnails. These thumbnails will be embedded into the blog post directly as little animated pictures, just like gifs, but much more size efficient.
  
==== Converting to webm ====
+
==== Convert to webm ====
 
<syntaxhighlight lang="shell-session">
 
<syntaxhighlight lang="shell-session">
 
$ ffmpeg -i video.mp4 video.webm
 
$ ffmpeg -i video.mp4 video.webm
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==== Shortening ====
+
==== Shorten ====
 
Start at 10 seconds and cut after the next 5 seconds:
 
Start at 10 seconds and cut after the next 5 seconds:
  
Line 13: Line 13:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==== Scaling down ====
+
==== Scale down ====
 
Resize to 300x533 px:
 
Resize to 300x533 px:
  
Line 20: Line 20:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==== Embedding into a post ====
+
==== Add bottom text ====
 +
<syntaxhighlight lang="shell">
 +
#!/bin/sh -e
 +
 
 +
if [ "$#" -ne 3 ]; then
 +
        echo "usage: $(basename $0) input output text"
 +
        exit 1
 +
fi
 +
 
 +
set -x
 +
font="/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf"
 +
ffmpeg -i "$1" -vf drawtext="fontfile=$font: \
 +
        text=\'$3\': fontcolor=white: fontsize=24: box=1: boxcolor=black@0.5: \
 +
        boxborderw=5: x=(w-text_w)/2: y=h-text_h-15" -codec:a copy "$2"
 +
</syntaxhighlight>
 +
 
 +
==== Merge multiple videos ====
 +
<syntaxhighlight lang="shell">
 +
#!/bin/sh -e
 +
 
 +
if [ "$#" -lt 1 ]; then
 +
        echo "usage: $(basename $0) video1 video2 video3 ..."
 +
        exit 1
 +
fi
 +
 
 +
set -x
 +
{
 +
        for i in $@; do
 +
                echo "file $i"
 +
        done
 +
} > inputlist
 +
 
 +
ffmpeg -f concat -i inputlist -c copy merged.webm
 +
</syntaxhighlight>
 +
 
 +
==== Embed into a post ====
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
<video controls width="300" height="533" class="border" autoplay="autoplay" loop mute>
 
<video controls width="300" height="533" class="border" autoplay="autoplay" loop mute>
Line 31: Line 66:
  
 
<pre>
 
<pre>
Some text talking about the video ([full video](/static/video/2019-00/video.webm)).
+
Some text talking about the video ([video](/static/video/2019-00/video.webm)).
 
</pre>
 
</pre>
  
 
[[Category:Guide]]
 
[[Category:Guide]]

Latest revision as of 11:29, 16 June 2019

Here's a short cheat sheet of how to get videos ready for blog posts. We convert them to the widely supported webm (mp4 will for example not work on Fedora out of the box), and create short and smaller video thumbnails. These thumbnails will be embedded into the blog post directly as little animated pictures, just like gifs, but much more size efficient.

Convert to webm

$ ffmpeg -i video.mp4 video.webm

Shorten

Start at 10 seconds and cut after the next 5 seconds:

$ ffmpeg -ss 00:10:00 -i video.webm -c copy -t 00:00:05 video-short.webm

Scale down

Resize to 300x533 px:

$ ffmpeg -y -i video-short.webm -vf scale=300:533 video-thumb.webm

Add bottom text

#!/bin/sh -e

if [ "$#" -ne 3 ]; then
        echo "usage: $(basename $0) input output text"
        exit 1
fi

set -x
font="/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf"
ffmpeg -i "$1" -vf drawtext="fontfile=$font: \
        text=\'$3\': fontcolor=white: fontsize=24: box=1: boxcolor=black@0.5: \
        boxborderw=5: x=(w-text_w)/2: y=h-text_h-15" -codec:a copy "$2"

Merge multiple videos

#!/bin/sh -e

if [ "$#" -lt 1 ]; then
        echo "usage: $(basename $0) video1 video2 video3 ..."
        exit 1
fi

set -x
{
        for i in $@; do
                echo "file $i"
        done
} > inputlist

ffmpeg -f concat -i inputlist -c copy merged.webm

Embed into a post

<video controls width="300" height="533" class="border" autoplay="autoplay" loop mute>
<source src="/static/video/2019-00/video-thumb.webm" />
<a href="/static/video/2019-00/video.webm">Description of the video here</a>
</video>

Make sure to embed the link to the full video somewhere in the text related to the video:

Some text talking about the video ([video](/static/video/2019-00/video.webm)).