Video on the web: HTML5 video, formats, codecs, and embedding

Andrew Dorokhov schedule 1 min read

menu_book Table of Contents

Articles on the video topic:

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.

code

Need Help with Development?

Happy to help — reach out via the contacts or go straight to my Upwork profile.

work View Upwork Profile arrow_forward

Frontend tips: CSS, HTML, and performance patterns

arrow_forward