HTML5 фоновое видео не воспроизводится - PullRequest
Новая
       25

HTML5 фоновое видео не воспроизводится

0 голосов
/ 04 октября 2018

У меня проблема с фоновым видео HTML5.Видео находится на первой странице и должно запускаться автоматически без звука.после нажатия на кнопку, он должен играть с 20% громкости.Мой код работает в Mozilla Firefox без каких-либо проблем.Но не в Safari или MS Edge.в гугл хром только условно.Когда я захожу на страницу, видео не запускается, когда я перехожу на другой сайт и возвращаюсь на домашнюю страницу, видео работает.

Я уже удалил код JS для тома и протестировал только с.mp4-видео.Без успеха.

HTML: 

<div id="video">
    <video loop="true" preload="none" autoplay="true">
        <source src=".../video.mp4" type="video/mp4">
        <source src=".../video.webm" type="video/webm">
    </video>
</div>

JS: 

video_show();
function video_show() {
  $("#video video").each(function(){this.volume = 0.0;});
};
$("button1").click(function() {
  $("#video video").each(function(){this.volume = 0.2;});
});
$("button2").click(function() {
  $("#video video").each(function(){this.volume = 0.0;});
});

CSS: 

#video video {
  height: auto;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  z-index: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

1 Ответ

0 голосов
/ 05 октября 2018

Ниже приведен обновленный код, который работает должным образом в Edge и Firefox. 

<!DOCTYPE html>
<head>
<style>
#video video {
 
  height: 200px;
  width: 200px;
 
 
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

function video_show() {
  $("#video video").each(function(){this.volume = 0.0;});

};

function play_sound() {
  $("#video video").each(function(){this.volume = 0.2;});

};
function mute_sound() {
  $("#video video").each(function(){this.volume = 0.0;});

};


</script>
</head>
<body onload="video_show()">
<input type="button" id="button1" value="Play Sound" onclick="play_sound()"/>
<input type="button" id="button2" value="Mute Sound" onclick="mute_sound()"/>
<div id="video">
    <video loop="true"  autoplay>
       <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>
</div>
</body>
</html>

Далее, Вы можете попытаться изменить код в соответствии с вашими требованиями.

Примечание: - Выполните тест на месте.Выход переполнения стека не будет воспроизводить видео должным образом.

...