javascript with html <video> load（）＆play（）函數不能觸發

Question

我一直在用HTML構建一個定製的視頻播放器，我遇到了一個問題，我懷疑它存在於我的javascript中，解決它我承認失敗。

問題是我的'loadChapter（）'函數從我所能看到的正確運行，但是當第二次觸發時，video.load（）和video.play（）方法似乎停止工作。

由於與客戶端的披露協議，我不能包含實際頁面的鏈接，下面是審查代碼。

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">&nbsp;</div></a></li> 
       <li><a href="X">2.<span>X</span><div class="clear">&nbsp;</div></a></li> 
       <li><a href="X">3.<span>X</span><div class="clear">&nbsp;</div></a></li> 
       <li><a href="X">4.<span>X</span><div class="clear">&nbsp;</div></a></li> 
       <li><a href="X">5.<span>X</span><div class="clear">&nbsp;</div></a></li> 
       <li><a href="X">6.<span>X</span><div class="clear">&nbsp;</div></a></li> 
       <li><a href="X">7.<span>X</span><div class="clear">&nbsp;</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">&nbsp;</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（用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); 
    }; 
}); 

}）;

視頻標籤和dom中標記的'海報'通過loadChapter（）腳本正確加載，但我很難弄清楚爲什麼視頻只能加載和播放一次。

有什麼我在這裏失蹤？

Answer 1

此問題的解決方案比不正確的代碼更加神祕，當我在Firefox中測試視頻時它工作正常，似乎webkit瀏覽器在引用文件時對video.load（）方法有一些問題嵌套標籤。

我解決它通過編寫條件語句和直接連接的src新的視頻標籤本身：

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(); 
};