Dorokhov.codes

07. Videos

Articles on the video topic:

Creating Background Ambient Videos In HTML5 using FFMPEG.
The Video Embed element.
Autoplay guide for media and Web Audio APIs.

Possible issues

Safari can request byte-range option. Web server (Apache) often can’t process such requests.

Byte-Range Requests error

.htaccess:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary

We should set up streaming videos.

HTML:

<video autoplay loop muted playsinline>
    <source src="/videos/video-promo.mp4" type='video/mp4' />
    <source src="/videos/video-promo.ogv" type='video/ogg' />
    <source src="/videos/video-promo.webm" type='video/webm' />
</video>

All the parameters are important.