HTML and CSS Reference
eXerCISe 8-5. aDDING a VIDeO eLeMeNt
In the Solution Explorer, right-click the Media folder and select the Add ➤ Existing
Item links. Select both versions of either the Wildlife or BigBuckBunny video files.
I will be using the Wildlife files for this demo.
In the Index.cshtml file, remove the autoplay attribute from the audio element.
You will autoplay the video and removing this will keep them from both playing at
the same time.
Add the following markup, just after the div that contains the audio controls:
<video id="video" autoplay controls loop>
<source src="~/Media/Wildlife.webm" type="video/webm" />
<source src="~/Media/Wildlife.mp4" type="video/mp4" />
<p>HTML5 video is not supported on your browser</p>
■ Note You already added the Mime types for webm , mp4 , and ogg to the web.config file earlier in this chapter.
Save your changes and press F5 to debug the application.
5. Try it out in several browsers to make sure the video can be played in each.
For the video element you included the autoplay , controls , and loop attributes. You already used the
autoplay and controls attributes when working with the audio element. The loop attribute will cause the video
to start over at the beginning when it finishes. This is also supported by the audio element.
■ The canPlayType() method that you used earlier on audio sources can also be used on video files. It works
the same way, either returning a blank string indicating the file is not supported, or a “maybe” or “probably” result.
Adding Custom Video Controls
Now you'll add custom controls for the video element just like you did for the audio element. For this exercise I
will be using the Big Buck Bunny video files.
eXerCISe 8-6. aDDING CUStOM VIDeO CONtrOLS
Modify the markup in the Index.cshtml file by replacing the video element with