我需要的是一个脚本,该脚本将触发页面上具有相同类的所有 html5 视频来播放——一旦页面被加载——因为 html5 自动播放属性是禁止的。
我是一个 JavaScript 菜鸟。我编写了下面的脚本来解决由于与 [skel.js] ( https://github.com/n33/skel.old ) 冲突而导致 html5 视频自动播放中断的问题。
我不能从头开始编写javascript,所以我对这个脚本中发生的事情一无所知;但是,它可以在我的网站上完成我需要它做的事情。但是,我敢打赌,它写得不好或效率低下。例如,我目前为每个视频/课程都有一个单独的脚本。我知道用同一类调用所有视频会更聪明,但我不知道如何。我很想知道这里是否有多余或错误的代码,以及是否有更好的解决方案让这些视频在页面加载时自动播放?
这是我正在使用的代码:
<script><!-- hack to fix html5 autoplay break when using skel.js-->
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video1')[0].play(); }, 2000);
}
</script>
这是我的完整测试代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
</head>
<body>
<video class="video1" width="100%" controls loop><!-- can't use autoplay becuase of a bug!-->
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.mp4" type="video/mp4">
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.ogg" type="video/ogg">
Your browser does not support this video.
</video>
<video class="video2" width="100%" controls loop><!-- can't use autoplay becuase of a bug!-->
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.mp4" type="video/mp4">
<source src="http://coldriverfurniture.com/_TEST/images/about-water-powered-tenoning-machine.ogg" type="video/ogg">
Your browser does not support this video.
</video>
<script><!-- hack to fix html5 autoplay break when using skel.js-->
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video1')[0].play(); }, 2000);
}
</script>
<script>
startplaying();
function startplaying(time) {
var run = setInterval(function() { $('.video2')[0].play(); }, 2000);
}
</script>
<script src="js/init.js"></script>
</body>
</html>
谢谢!