Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

398 LESSON 14: Integrating Multimedia: Video and Sound


FIGURE 14.8
A video embedded
using the <video>
tag, with controls.

When embedding a video, make sure that you give users some
way to control the video playback. Be conservative with autoplay
and loop, too. Many users don’t want a video to start playing
immediately when they get to a page. If you include the loop
attribute and you don’t include controls, the user will have to
leave the page to stop the video.

CAUTION

By default, the <video> element will be the same size as the video in the video file. You
can change the size of the element on the page using the height and width attributes,
however, the browser will preserve the aspect ratio of the video file and leave blank
space where needed. For example, my movie was created using a 3:2 aspect ratio. If I
create a <video> element with a 9:5 aspect ratio, the movie will appear centered wi thin
the element, as shown in Figure 14.9:
<video style="background: black;" src="http://www.yo-yo.org/mp4/yu.mp4" controls
width="675" height="375">

I set the background color of the <video> element to black to make it clear where the
browser puts the extra space when the movie’s aspect ratio does not match the aspect
ratio of the element.
Free download pdf