javascript with html <video> load（）＆play（）関数が起動しない

Question

私はHTMLでカスタマイズされたビデオプレーヤーをビルドしていましたが、問題に遭遇しました。私はJavaScriptを使用していると思われます。それを解決するために私は敗北を認めます。

問題は、私の 'loadChapter（）'関数が正しく表示されていますが、もう一度起動すると、video.load（）メソッドとvideo.play（）メソッドが動作を停止しているようです。

クライアントとの開示契約のために実際のページへのリンクを含めることはできません。ここでは検閲されたコードです。

HTML：（jQueryを使って）

<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：

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

}）。

ビデオタグの「poster」とdomのマークアップはすべてloadChapter（）スクリプトで正しく読み込まれていますが、動画が1回ロードされて再生される理由を把握していません。

ここに何か不足していますか？

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