diff options
| author | Teddy Wing | 2018-11-20 21:59:37 +0100 |
|---|---|---|
| committer | Teddy Wing | 2018-11-20 21:59:37 +0100 |
| commit | 9742105d38ce4b42623394a6ab898312d310e686 (patch) | |
| tree | 205a083caed2c9d16b0548ca12b74c83bc620c0d | |
| parent | 5619d57b5736067000de4919452bbb0392a43a3e (diff) | |
| download | dome-key-web-9742105d38ce4b42623394a6ab898312d310e686.tar.bz2 | |
Make an MPEG-4 version of the demo video
Apparently, Safari doesn't support h.264-encoded video with a frame size
larger than 640x480. Learned about it from this Stack Overflow answer:
https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad/31247386#31247386
According to Apple's documentation:
> The following compression standards are supported:
>
> * H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps.
> Note that B frames are not supported in the Baseline profile.
> * MPEG-4 Part 2 video (Simple Profile)
> * AAC-LC audio, up to 48 kHz
(https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW9)
Seems a bit odd to me, but I don't know video, so sure, why not?
Since I want to keep my atypical video dimensions, encode it in MPEG-4
following this guide:
https://trac.ffmpeg.org/wiki/Encode/MPEG-4
Unfortunately, this gives us a 12 Mb video file (compared to the h.264's
~3 Mb). Reducing the quality just didn't produce a decent-looking
output.
Deciding to keep the h.264 version, just in case it's supported
somewhere, because it's the version with the smallest file size.
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | scripts/video_export.sh | 9 |
2 files changed, 10 insertions, 2 deletions
@@ -31,8 +31,9 @@ </p> <video controls preload width="842" height="518" class="margin-left-neg-12.5%"> - <source src="/assets/DomeKey-Screencast.mp4" type="video/mp4" /> + <source src="/assets/DomeKey-Screencast.h264.mp4" type="video/mp4" /> <source src="/assets/DomeKey-Screencast.webm" type="video/webm" /> + <source src="/assets/DomeKey-Screencast.mpeg4.mp4" type="video/mp4" /> <p> <a href="/assets/DomeKey-Screencast.mp4">Demo video</a> diff --git a/scripts/video_export.sh b/scripts/video_export.sh index 7313c93..b345bd6 100644 --- a/scripts/video_export.sh +++ b/scripts/video_export.sh @@ -16,4 +16,11 @@ ffmpeg \ -acodec aac \ -strict \ -2 \ - DomeKey-Screencast.mp4 + DomeKey-Screencast.h264.mp4 + +ffmpeg \ + -i Screencast.mov \ + -c:v mpeg4 \ + -q:v 5 \ + -acodec aac \ + DomeKey-Screencast.mpeg4.mp4 |