Embedding HTML5 Video

HTML5 allows video to be embedded natively into a web page. With the <video> element, we can add any video, as long as it's the appropriate format, to any page on the web. No longer do we need to use fancy embedding software like Real Player or QuickTime. This is important for allowing video to be played on mobile devices. Since these devices typically don't allow for browser plugins, embedding video using the <video> element is the only way to get the video to play.

The basic syntax for embedding video is:

<video width="px" height="px" controls>
    <source src="path" type="mime/type">
</video>

Exiting code block.

The attributes for width, height, and controls are optional. If the attributes are omitted, the video's size will be inherited from the video file or the video controls (play, pause, mute, etc.) will not be shown.

Video must be a certain format to play in each browser. The following table shows which video format is supported by what browser:

In general, we only need to include two encodings of our video to make sure it works in every browser. Those two formats are typically MP4 and WebM. It looks, from the previous table, that MP4 is supported in all browsers, but with the same caveat as fonts, other conditions might forbid a video from playing in a supported browser. For this reason, we will include the WebM video as well as the MP4 video.

There's one more caveat to understand before we get started. In general, browsers will ignore sources that they cannot play; however, in the case of Safari on iOS, if the first source listed is not an MP4, the device will not play the video. It doesn't matter if the MP4 is included as the second source, it won't play on Safari on iOS if it is not the first source child of the video element. For example, this video will play on iOS devices:

<video width="800" height="600" controls>
    <source src="pr-with-jayne.mp4" type="video/mp4">
    <source src="pr-with-jayne.webm" type="video/webm">
</video>

Exiting code block.

Whereas the exact same video files, embedded like the following, will not play on iOS:

<video width="800" height="600" controls>
    <source src="pr-with-jayne.webm" type="video/webm">
    <source src="pr-with-jayne.mp4" type="video/mp4">
</video>

Exiting code block.

It doesn't matter that the mp4 file is included in the source. iOS will not play the content unless it is the first source in the list.

We have included for you two video files for embedding today. Let's add them to our site now.

Step1. If necessary, activate the code editor.

Step2. To open a new file, press:

Control key+o

You see the Open dialog.

Step3. If necessary, navigate to the Code the Web folder.

Step4. To open samples.html,

Double-Click samples.html

The page containing training samples loads in the code editor.

Step5. To add the video, type the code in bold below [Region 29]:

<div class="row">
    <div class="two columns">
        <h2>Video Example</h2>
        <p>This sample video explains how to create associative arrays in the Perl programming language.</p>
 
    </div>
    <div class="four columns">
        <h2>Associative Arrays in Perl</h2>
        <video class="full-width" controls>
            <source src="video/associativeArrays.mp4" type="video/mp4">
            <source src="video/associativeArrays.webmhd.webm" type="video/webm">
        </video>
    </div>
</div>

Exiting code block.

In our example, we added the .full-width class to ensure that the video fills its parent container rather than using a fixed size using height and width attributes.

Let's take a look at this in the web browser.

Step6. Save samples.html.

Step7. To navigate to samples.html, in the web browser, in the page's navigation,

Click Samples

You see the video loaded in the site:

You can now play the video, if you would like.

Let's finish out the samples page by creating a sample code snippet.