Submodule2.2: Media

Video

Video is another new feature of HTML5.

<video> tag is used to show our video in the web page.

Handling video is very similar to audio.

A src attribute will be needed to state the url of our video.

Similar with audio, we can use <controls> attribute to display the playback bar and <source> element to place alternative formats of our video.

The video formats that are supported on HTML5 are:

.mp4, .webm and .ogg.

Currently only Chrome, Firefox and Opera support all these formats. 

 Example:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 For more information: https://www.w3schools.com/html/html5_video.asp

Exercise

1. Open the file exersice02.2.html in the folder "Exercises" in your editor.
2. Modify and save the file. You will find the movie file "myvideo.mp4" in the folder "media". The browser's output should be as shown in the following image:

Solution: