Question

I have an html5 video that I would like to automatically update with a new video source as the previous video finishes.

My video code is as follows:

        <video autoplay preload loop controls id="v"> 
        <source src="videos/DP.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
        <source src="videos/DP.webm" type='video/webm; codecs="vp8, vorbis"'> 
        <source src="videos/DP.ogv" type='video/ogg; codecs="theora, vorbis"'> 
    </video> 

I can use video.src to update the source, but how do I modify the source to include the 3 different encodings?

Answer 1

Could you give the <source> tags an ID and then reference them?

<source src="" type="" id="mp4">

JavaScript

(function() {
    var mp4 = document.getElementById('mp4');
    mp4.src = 'newFile.mp4';
})();