Until 2012, it was only possible to integrate an audio or video player using the proprietary Flash technology, marketed by the company Macromedia (later acquired by Adobe). The <video> element of HTML5 is one of the three "Flash killers" (the others being <audio> for the sound and <canvas> for drawing and animation).
(Note that Adobe no longer supports Flash Player since December 31, 2020)
Check the HTML code of the following CodePen:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML5 video player</title>
<meta charset="utf-8"/>
<style>
video {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -240px;
}
</style>
</head>
<body>
<!-- <video> tag, with the @controls attribute
giving it the play/pause/seeker controls. Try removing the controls attribute,
adding autoplay or loop -->
<video controls>
<!-- I have three versions of the video encoded with
different codecs. The browser will automatically
choose the first one it knows it can play. -->
<source src="https://html5doctor.com/demos/video-canvas-magic/video.webm" type=video/webm type=video/webm>
<source src="https://html5doctor.com/demos/video-canvas-magic/video.ogg type=video/ogg" type=video/ogg>
<source src="https://html5doctor.com/demos/video-canvas-magic/video.mp4" type=video/mp4 type=video/mp4>
</video>
<!-- That's it! You now have video playing in your browser! -->
</body>
</html>
Please note that:
The controls attribute indicates that a control panel with play/stop/volume/progress widgets should be displayed;
Usually the browser will use the first format it recognizes (in this case, the browser checks whether mp4 is supported, and if not, it will check for the ogg format, and so on). Some browsers may use a different heuristic and choose a "preferred" format;
The <video> element is a DOM member, so CSS styling can be applied, as well as manipulation using the DOM API.
You will learn more about the different attributes of the <video> element later on in the course.
The <video> element is supported by all major browsers. See the support table from CanIUse.
Help! <video src="my youtube video URL"></video> does not work!
While they use HTML5 to render their videos, these hosting sites (YouTube, etc.) use rather complex techniques in order to prevent you from using them with the <video>element. Instead, you often need to embed an <iframe> that will render the HTML5 videos in your Web site, and of course, the advertising that comes along with them.
Usually you have an "embed" button close to the videos that prompts you with some HTML code that you can copy and paste for embedding.
Here is the HTML code you need to copy and paste in order to embed a video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/WMFXg-kni0U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The YouTube video embedded in this page by the above code: it's HTML5 but it's not a <video> element directly inserted in the HTML of this page, it's an <iframe>.
This is one of the main problems encountered in recent years: codec support was not the same from one browser to another, for commercial/economic reasons. For example, between 2010 and 2013, Firefox only supported the ogg/oggm format. It did not support mp3/mp4 encoding for audio/video, while Internet Explorer only supported H.264 encoding. Since 2012, things have changed with browser updates and today most popular formats are supported.
From W3C's specification: The video element
MDN's Web Docs: <video>: The Video Embed element
From Apple's developer site: Safari HTML5 audio and video guide
Article from HTML5 Rocks: Media