HTML and CSS Reference
In-Depth Information
Step 3: Change between videos
You'll also need the
change_video
function, shown in the next listing. As you can see,
it uses both the
src
property and the
play()
method to change the video being played.
Include the listing in a
script
block at the end of your code's
head
section.
Listing 8.4. index.html—Handling the user clicking the playlist
Step 4: Use event handlers to handle the changing of video in greater detail
In the previous code, the
src
of the
<video>
element is set, and the
play()
method
is called immediately. This works well because all of the videos are relatively small and
everything is being loaded off the local disk. If you had a much larger video, it's likely that
not enough of it will have loaded to start playback if the
play()
method is called im-
mediately, leading to an error. A more reliable approach would be to wait until the video
is loaded before starting to play. The HTMLMediaElement interface includes a number of