javascript with html< video> load（）& play（）函数没有触发 [英] javascript with html <video> load() & play() function not firing
问题描述
我一直在构建一个带有HTML的自定义视频播放器，我遇到了一个问题，我怀疑这是我的javascript，经过几个小时的努力尝试解决问题我承认失败。
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.
问题是我的'loadChapter（）'函数从我能看到的内容中正常运行，但是当第二次触发时，video.load（）和video.play（）方法似乎刚停止工作
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（使用jQuery）：
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);
};
});
}）;
'海报'对于视频标签和dom中的标记都是通过loadChapter（）脚本正确加载的，但是我很难搞清楚为什么视频只会加载和播放一次。
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.
我在这里缺少什么？
推荐答案
这个问题的解决方案比不正确的代码，当我在Firefox中测试视频时它运行正常，似乎webkit浏览器在嵌套标签中引用文件时使用video.load（）方法有些麻烦。
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.
我通过编写条件语句并将新视频的src直接附加到标签本身来解决它：
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();
};
这篇关于javascript with html< video> load（）& play（）函数没有触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
