HTML and CSS Reference
In-Depth Information
eXerCISe 8-5. aDDING a VIDeO eLeMeNt
1.
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.
2.
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.
3.
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>
</video>
■
Note
You already added the Mime types for
webm
,
mp4
, and
ogg
to the
web.config
file earlier in this chapter.
4.
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.
Tip
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
1.
Modify the markup in the
Index.cshtml
file by replacing the
video
element with
this:
<video id="video"
onplay="updatePlayPauseVideo()"
onpause="updatePlayPauseVideo()"
onended="endVideo()"
ontimeupdate="updateSeekVideo()"
