Несколько тегов видео HTML5 на 1 странице

Question

У меня есть веб-страница, где верхняя часть страницы - полноэкранный div с фоном видео. У меня также есть, далее на странице другое видео (для целей тестирования одно и то же видео).

У меня есть интересный сценарий, чтобы выяснить ...

• Видео 1 (в верхней части страницы) прекрасно работает на Firefox, Safari, Chrome, IE
• Video 2 (на полпути вниз страница) отлично работает на Firefox, Safari и IE. НЕ Chrome

В связи с характером моей работы я должен убедиться, что веб-сайты я разрабатываю, безопасный браузер. Кто-нибудь знает, почему 1 видео будет работать в Chrome, а другой - нет?

в верхней части страницы

<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}"> 
    <source src='img/video.mp4' type="video/mp4"/> 
</video> 

HALF WAY DOWN PAGE

<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}"> 
    <source src="img/video.mp4" type="video/mp4" /> 
</video> 

У меня тоже есть этот бит DOM Javascript в нижней части моей страницы

<script> 
    document.getElementById('video').play(); 
    document.getElementById('s-video').play(); 
</script> 

Answer 1

Я бы предположил (поскольку здесь не так много информации) возникает проблема с готовностью данных в ближайшее время, когда выполняется play().

Вы могли бы попытаться изменить следующие вещи:

• I сами теги, изменить preload использовать auto
• В JavaScript, добавьте слушателей к элементам для canplay события

Пример:

<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}"> 
    <source src='img/video.mp4' type="video/mp4"/> 
</video> 

<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}"> 
    <source src="img/video.mp4" type="video/mp4" /> 
</video> 

и

<script> 
    var video1 = document.getElementById('video'); 
    var video2 = document.getElementById('s-video'); 

    video1.addEventListener("canplay", start); 
    video2.addEventListener("canplay", start); 

    function start() {this.play()}; // "this" = current element calling 
</script> 

Update

Это также может работать, если вы хотите иметь preload набор для none:

<script> 
    var video1 = document.getElementById('video'); 
    var video2 = document.getElementById('s-video'); 

    video1.addEventListener("canplay", start); 
    video2.addEventListener("canplay", start); 

    function start() {this.play()}; // "this" = current element calling 

    video1.load(); // start loading video (metadata + data) 
    video2.load(); 
</script>