带有 html <video> load() 和 play() 函数的 javascript 没有触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7942619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript with html <video> load() & play() function not firing
提问by Valstorm
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.
我一直在用 HTML 构建一个定制的视频播放器，但遇到了一个问题，我怀疑它出在我的 javascript 上，经过几个小时的努力试图解决这个问题，我承认失败了。
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.
问题是我的 'loadChapter()' 函数在我所看到的情况下运行正常，但是当第二次触发时，video.load() 和 video.play() 方法似乎停止工作。
I cannot include a link to the actual page due to disclosure agreements with the client, here is the censored code.
由于与客户的披露协议，我无法包含指向实际页面的链接，这是经过的代码。
HTML:
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):
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);
};
});
});
});
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.
视频标签的“海报”和 dom 中的标记都通过 loadChapter() 脚本正确加载，但我很难弄清楚为什么视频只会加载和播放一次。
Is there something I'm missing here?
有什么我在这里想念的吗？
回答by Valstorm
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.
这个问题的解决方案比不正确的代码更神秘，当我在 Firefox 中测试视频时它工作正常，当文件在嵌套标签中引用时，webkit 浏览器似乎在 video.load() 方法上有一些问题。
I solved it by writing a conditional statement and attaching the src for the new video directly to the tag itself:
我通过编写条件语句并将新视频的 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();
};
