With YouTube reigning the universe, there’s really random cases where you might need to host your videos by yourselves. Also converting videos to different formats for maximum compatibilities is difficult, time consuming, even sometimes costly.
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome | ☑ | ☑ | ☑ |
| Firefox | ☑ | ☑ | ☑ |
| Safari | ☑ | ☑ | ☒ |
| Edge | ☑ | ☑ | ☑ |
| Opera | ☑ | ☑ | ☑ |
HTML Video element <video> is used to embed a media player to load and play video in webpages. Even an audio files can be payed using the <video> tag, tough more appropriate way is to use the <audio> tag. Typical video tag contains video start tag, source tag, and the text between the tags to be displayed in browsers that do not support the <video> tag. Multiple source tags are used so the browser can choose the proper source. A typical <video> element is like this:
<video width="480" height="270" autoplay controls>
<source src="/blog/wp-content/uploads/2020/09/flower.mp4" type="video/mp4">
<source src="/blog/wp-content/uploads/2020/09/flower.webm" type="video/webm">
Sorry, your browser does not support HTML embedded videos.
</video>However, using JavaScript, videos can be loaded like this with advanced customizations:
This is embedding YouTube video:
Same video with different settings:
And this one is with autoplay but muted. Chrome does not allow autoplay in all cases. However, muted autoplay is always allowed.
Learn more about YouTube Embedded Players and Player Parameters at Google Developers.
More on HTML5 Video embed element at MDN web docs.
Saidul Hassan