HTML and CSS Reference
In-Depth Information
<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>
</div>
</div>
<div>
<div>
(640×480)
<div>
<div>
<video
<video autoplay loop controls width=
"320"
height=
"240"
id=
"thevideo"
>
<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>
</div>
</div>
<div>
<div>
(320×240)
</div>
</div>
<div>
<div>
<video
<video autoplay loop controls width=
"180"
height=
"120"
id=
"thevideo"
>
<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>
</div>
</div>
(180×120)
</body>
</body>
</html>
</html>
Nowitistimeforamoreelaborate(and,wethink,moreeffective)exampleofscalingavideo.
By changing the
width
and
height
attributes of the
<video>
tag, we can scale the video on
the fly. While there might be a few practical reasons that you would do this in a real-world
situation,itisalsoaneffectivewaytodemonstratesomeofthepoweroftheHTML5
<video>
tag.
First, we need to add an HTML5
range
control to the page:
<form>
<form>
Video Size:
<input
<input type=
"range"
id=
"videoSize"
min=
"80"
max=
"1280"
step=
"1"
value=
"320"
//>
</form>
