HTML and CSS Reference
In-Depth Information
Because all of your video files are consistently named, you can remove the file extension
for all of the
<li>
elements in the playlist (do this now). Instead of getting the complete
filename from the
<li>
elements, the
change_video
method can copy the file exten-
sion from the
.currentSrc
property and use that to compose the filename of the selec-
ted video. The following listing shows the updated
change_video
function, which used
this approach; use it to replace the existing one in your file.
Listing 8.8. index.html—Using
currentSrc
to determine the video type
A workaround for IE9's currentSrc bug
The code in
listing 8.8
is straightforward, but you may find that it doesn't work properly
in IE9. The problem is a bug in IE9: Once a
<source>
element is added, it immediately
takes priority over the
src
attribute and the
currentSrc
property of the
<video>
ele-
ment. This means that if you run the app in IE9, then instead of selecting a new video when
you click the playlist, you'll see the first video repeated.
Another limitation of IE9 is that updating
<source>
elements with JavaScript has no ef-
fect. If you want to update the playing video in IE9 when you've used
<source>
ele-
ments, then the only workable solution is to replace the entire
<video>
element. The fol-
lowing snippet shows just such an approach:
