我在网络编程方面相对较新,因此在保持代码清洁方面存在问题。在最后一个项目上工作,除其他事项外,我必须做以下事情:
如果我在上一个视频结束后立即开始播放下一个视频,则因为尚未加载新视频而导致延迟。我对问题的解决方案:
它有效,但是我的代码(尤其是JS部分以及在页面上有两个视频标签的必要性)对我来说似乎并不干净。有没有更好的解决方案?
<section id="main-page-top">
<video id="bgvid-<?php echo $vidId; ?>" autoplay width="100%">
<source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidId; ?>.webm" type="video/webm">
</video>
<video id="bgvid-<?php echo ($vidId + 1); ?>" class="hidden" width="100%">
<source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidIdAlt; ?>.webm" type="video/webm">
</video>
</section>
document.getElementById('#main-page-top video:nth-child(1)').addEventListener('ended', function() {
document.getElementById('#main-page-top video:nth-child(1)').style.display = "none";
document.getElementById('#main-page-top video:nth-child(2)').style.display = "block";
document.getElementById('#main-page-top video:nth-child(2)').play();
var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(1)').id.substring(6));
if (vidNum === 7) {
vidNum = -1;
} else if (vidNum === 8) {
vidNum = 0;
}
document.getElementById('#main-page-top video:nth-child(1)').setAttribute('id', 'bgvid-' + (vidNum + 2));
document.getElementById('#main-page-top video:nth-child(1) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
document.getElementById('#main-page-top video:nth-child(1)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
document.getElementById('#main-page-top video:nth-child(1)').load();
document.getElementById('#main-page-top video:nth-child(1)').pause();
});
document.getElementById('#main-page-top video:nth-child(2)').addEventListener('ended', function() {
document.getElementById('#main-page-top video:nth-child(2)').style.display = "none";
document.getElementById('#main-page-top video:nth-child(1)').style.display = "block";
document.getElementById('#main-page-top video:nth-child(1)').play();
var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(2)').id.substring(6));
if (vidNum === 7) {
vidNum = -1;
} else if (vidNum === 8) {
vidNum = 0;
}
document.getElementById('#main-page-top video:nth-child(2)').setAttribute('id', 'bgvid-' + (vidNum + 2));
document.getElementById('#main-page-top video:nth-child(2) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
document.getElementById('#main-page-top video:nth-child(2)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
document.getElementById('#main-page-top video:nth-child(2)').load();
document.getElementById('#main-page-top video:nth-child(2)').pause();
});
答案 0 :(得分:0)
谢谢你们。我无法找到能否将您的评论标记为正确答案。
现在代码看起来像这样(添加了淡入/淡出功能):
var vidFading = function(p1, p2) {
$(p1).on('timeupdate', function(event) {
var current = Math.round(event.target.currentTime * 1000);
var total = Math.round(event.target.duration * 1000);
if ((total - current) < 500) {
$(this).fadeOut("slow");
$(p2).fadeIn(1000);
}
});
}
var vidFoo = function(p1, p2) {
var x = document.querySelector(p1);
var x1 = document.querySelector(p1 + ' source')
var y = document.querySelector(p2);
y.play();
var vidNum = parseInt(document.querySelector(p1).id.substring(6));
if (vidNum === 7) {
vidNum = -1;
} else if (vidNum === 8) {
vidNum = 0;
}
x.setAttribute('id', 'bgvid-' + (vidNum + 2));
x1.setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm');
x.setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg");
x.load();
x.pause();
}
if (document.getElementById('main-page')) {
vidFading('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)');
vidFading('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)');
document.querySelector('#main-page-vid video:nth-child(1)').addEventListener('ended', function() {
vidFoo('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)');
});
document.querySelector('#main-page-vid video:nth-child(2)').addEventListener('ended', function() {
vidFoo('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)');
});
}
&#13;