Автоматический запуск / воспроизведение видео HTML5 с использованием JavaScript, чтобы избежать использования атрибута автозапуска
Что мне нужно: скрипт, который будет запускать все видео html5 на странице с тем же классом для воспроизведения - после загрузки страницы - потому что атрибут автозапуска html5 запрещен.
Я нуб Javascript. Я написал нижеприведенный сценарий, чтобы исправить проблему, из-за которой автозапуск прерывается на видео html5 из-за конфликта с [skel.js] ( https://github.com/n33/skel.old).
Я не могу написать 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>
Спасибо!