4.7 Video and Scripting—A Simple Video Player 87The video player’s HTML page with JavaScript library and CSS styles can be
found on this book’s companion website at the following links:
z http://html5.komplett.cc/code/chap_video/js_videoPlayer_en.html
z http://html5.komplett.cc/code/chap_video/js_videoPlayer.js
z http://html5.komplett.cc/code/chap_video/js_videoPlayer.css4.7.1 Integrating the Video
Most likely, you are already familiar with the HTML code for integrating video.
Apart from the two event handler attributes oncanplay and ontimeupdate, which
will play an important role later on, there is not much new here:
<video preload=metadata
poster=videos/bbb_poster.jpg
width=854 height=480
oncanplay="initControls()"
ontimeupdate="updateProgress()">
<source src='videos/bbb_480p_stereo.ogv'
type='video/ogg;codecs="theora, vorbis"'>
Sorry, your browser is unable to play this video.
With preload=metadata, we first load only so much of the film that the film du-
ration and at least the first frame are available. During loading, we display the
picture specified in the poster attribute and then the first frame, which, unfortu-
nately, is completely black in our case.
The width and height is specified for demo purposes to reenlarge the original
video—reduced from 854 x 480 to 428 x 240 after downloading—back to 854 x 48 0
pixels. Why? Well, the reduced version is 39MB and is easier to test than the origi-
nal video at 160MB. Also, explicitly specifying the attributes width and height can
help explain 80% of the short HTMLVideoElement interface. This interface consists
of only four attributes for the video dimensions; an attribute for the poster frame’s
URL, if there is one; and the audio attribute that reflects whether the audio track
is muted or not.
Provided that the variable video contains a reference to our video element, we
have the following attribute values:
z video.width = 854 (specified width)
z video.height = 480 (specified height)
NOTE