I’ve created some timelapse videos. Uploading to YouTube worked, but for the timelapse camera, the making of videos is automatic and served by a cloud/local webserver. Locally, with a 50Mb (few minutes @25fps, 1080p), this is fine. A simple <video> tag and HTML5, with a simple python http.server works fine.
But it doesn’t stream and so is slow to load on the internet. This explains why streaming and variable quality is essential. Here’s what I did to stream h264 video using ffmpeg, MP4Box and HTML5. I’m on Ubuntu 18.04.
- Install MP4Box seperately because a apt-get isn’t up-to-date enough.
- Use ffmpeg with libx264.
- Broadly follow this helpful post.
Specific settings (to improve) at:
# Make different qualities
ffmpeg -y -i input25.mp4 -preset veryfast -s:v 1024x436 -vsync passthrough -an -c:v libx264 -x264opts 'keyint=25:min-keyint=25:no-scenecut' "output_med.mp4"
ffmpeg -y -i input25.mp4 -preset veryfast -s:v 1280x720 -vsync passthrough -an -c:v libx264 -x264opts 'keyint=25:min-keyint=25:no-scenecut' "output_high.mp4"
ffmpeg -y -i input25.mp4 -s:v 320x180 -preset veryfast -vsync passthrough -an -c:v libx264 -x264opts 'keyint=25:min-keyint=25:no-scenecut' -cfr 26 "output_low.mp4"
ffmpeg -y -i input25.mp4 -s:v 320x180 -preset veryfast -vsync passthrough -an -c:v libx264 -x264opts 'keyint=25:min-keyint=25:no-scenecut' -crf 26 "output_low.mp4"
# Make segments @ 2s
MP4Box -dash-strict 2000 -rap -frag-rap -bs-switching no -profile "dashavc264:live" output_* -out "output/output.mpd"
Then create a simple HTML5 video:
<!DOCTYPE html>
<html lang="en">
<head></head>
<title>streaming.html</title>
<body>
<video data-dashjs-player loop="false" autoplay="false" controls="true" poster="https://picsum.photos/id/223/200/300">
<source src="files/output/output.mpd" type="application/dash+xml">
<!-- <source src="files/backup video.mp4" type="video/mp4"> -->
</video>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
</body>
</html>
And finally run a simple webserver in that servers the html file and segments:
python -m http.server
Now to automate the production of adaptive, streaming videos. And investigate alternatives to libx264 like libx265 (best) and VP9 (good, open) and/or hardware encoding.
One thought on “Streaming Videos with HTML5 and Dash”