javascript with html <video> load() & play() function not firing

html, video

Solution

The solution to this problem was more cryptic than incorrect code, when I tested the video in Firefox it was working fine, it seems that webkit browsers have some trouble with the video.load() method when the files are referenced in nested tags.

I solved it by writing a conditional statement and attaching the src for the new video directly to the tag itself:

function loadChapter(i) {
    //$('#video').attr('poster', chapters[i][0]);

    if($.browser.safari || $.browser.msie) {
        $('#video').attr('src', chapters[i][1]);
    } else {
        $('#video').attr('src', chapters[i][2]);
    };

    video.load();
    video.play();
};

Problem

I've been building a customised video player with HTML and I've run into a problem, I suspect it lies with my javascript, after toiling for hours trying to work it out I admit defeat. The problem is that my 'loadChapter()' function is running correctly from what I can see, but when fired a second time, the video.load() and video.play() methods seem to just stop working. I cannot include a link to the actual page due to disclosure agreements with the client, here is the censored code. HTML: ``` <div id="shell"> <div id="sidebar"> <div id="logo"> <a href="#">X</a> </div> <nav> <ul id="chapters"> <li><a href="X">1.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">2.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">3.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">4.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">5.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">6.<span>X</span><div class="clear"> </div></a></li> <li><a href="X">7.<span>X</span><div class="clear"> </div></a></li> </ul> </nav> <div id="controls"> <div id="vidnav"> <a id="prev" title="Previous Chapter" href="#">Prev</a> <div> <a id="play" title="Play Chapter" href="#" onclick="document.getElementById('video').play()" style="display:none;">Play</a> <a id="pause" title="Pause Chapter" href="#" onclick="document.getElementById('video').pause()">Pause</a> </div> <a id="next" title="Next Chapter" href="#">Next</a> </div> <div class="clear"> </div> <div id="vidseek"> </div> </div> </div> <div id="content"> <video id="video" autoplay="autoplay"> <source id="mp4" src="video/X.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source id="webm" src="video/X.webm" type='video/webm; codecs="vp8, vorbis"' /> Your browser does not support HTML video. </video> </div> </div> ``` javascript (with jQuery): ``` $(document).ready(function(){ var shell = "#shell"; var objH = $(shell).outerHeight(); autoMargins(shell); $(window).resize(function() { autoMargins(shell); }); function autoMargins(obj){ var winH = $(window).height(); if (winH >= objH ) { var topMargin = (winH/2) - (objH/2); $(obj).css('marginTop', topMargin); }; }; // GET VIDEO FILES var video = document.getElementById('video') var filepath = "video/"; var chapters = new Array(); var totalChapters = $('#chapters li').length; for( i=0; i < totalChapters; i++ ) { chapters[i] = new Array(); filename = $('#chapters li a:eq(' + i + ')').attr('href'); for( j=0; j < 3; j++ ) { chapters[i][0] = filepath + filename + ".png"; chapters[i][1] = filepath + filename + ".mp4"; chapters[i][2] = filepath + filename + ".webm"; }; }; // CHAPTER CONTROLS var currentChapter = 0; $('#chapters li a').click(function(e) { e.preventDefault(); currentChapter = $(this).parent().index(); loadChapter(currentChapter); }); var mp4 = document.getElementById("mp4"); var webm = document.getElementById("webm"); function loadChapter(i) { $('#video').attr('poster', chapters[i][0]); mp4.setAttribute("src", chapters[i][1]); webm.setAttribute("src", chapters[i][2]); video.load(); video.play(); }; $('#play').click(function(e) { e.preventDefault(); $('#play').toggle(); $('#pause').toggle(); }); $('#pause').click(function(e) { e.preventDefault(); $('#play').toggle(); $('#pause').toggle(); }); $('#next').click(function(e) { e.preventDefault(); if (currentChapter < totalChapters ) { currentChapter++; loadChapter(currentChapter); }; }); $('#prev').click(function(e) { e.preventDefault(); if (currentChapter >= 0 ) { currentChapter--; loadChapter(currentChapter); }; }); ``` }); The 'poster' for the video tag and the markup in the dom is all loading correctly via the loadChapter() script, but I'm having a hard time figuring out why the video will only load and play once. Is there something I'm missing here?

Original source