HTML and CSS Reference
In-Depth Information
Plain-Vanilla Video Embed
To demonstrate a plain-vanilla embed, we are going to work under our previously established
rules for video formats. We will use three formats because no one format will work in every
browser.WehavecreatedaversionoftheMuirBeachvideoasa
.webm
,an
.ogg
,andan
.mp4
.
For the rest of this chapter, we will use all three formats in all of our video embeds.
To support all three formats at once, we must use an alternative method for setting the
src
attribute of the
<video>
tag. Why? Because we need to specify three different video formats
instead of one in our HTML page. To do this, we add
<source>
tags within the
<video>
tag:
<video
<video id=
"thevideo"
width=
"320"
height=
"240"
>
<source
<source src=
"muirbeach.webm"
type=
'video/webm; codecs="vp8, vorbis" '
>
<source
<source src=
"muirbeach.mp4"
type=
'video/mp4; codecs="avc1.42E01E, mp4a.40.2" '
>
<source
<source src=
"muirbeach.ogg"
type=
'video/ogg; codecs="theora, vorbis" '
>
</video>
</video>
NOTE
We put the
.mp4
file second in the
src
list because newer versions of Chrome will try to use the
format, but performance is spotty. This might cause issues on iOS (iPhone, iPad) devices and with
older versions of Safari. In those versions of Safari, the browser will not attempt to load any other
src
type than the first one listed.
When a web browser reads this HTML, it will attempt to load each video in succession. If it
doesnotsupportoneformat,itwilltrythenextone.Usingthisstyleofembedallowsthecode
in
Example 6-1
to execute on all HTML5-compliant browsers.
Also notice that we have set the
width
and
height
properties of the video. While these are
not necessarily needed (as we saw earlier), it is proper HTML form to include them, and we
will need them a bit later when we start to manipulate the video size in code.
Example 6-1. Basic HTML video
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX1: Basic HTML5 Video
</title>
</title>
</head>
</head>
<body>
<body>
<div>
<div>
<video
<video id=
"thevideo"
width=
"320"
height=
"240"
>
