Safari не хочет автоматически воспроизводить видео. Как это исправить? - PullRequest
Новая
       86

Safari не хочет автоматически воспроизводить видео. Как это исправить?

0 голосов
/ 23 февраля 2020

Я уже перепробовал почти все, но не могу найти решение, как заставить Safari автоматически воспроизводить видео в начале веб-страницы. 

<script>
	
		   var loopCount = 0;

		   document.getElementById('bgvid').addEventListener('timeupdate', function () {
		   	if (this.currentTime == 0)
		   	++loopCount;
		   	if (loopCount == 20)
		   	this.pause();
});

</script>

<script>
	
var promise = document.querySelector('#bgvid').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

</script>

<script>	
	
	
	document.addEventListener('keydown', function(e) {
		if (e.keyCode == 113) {
			document.getElementById('bgvid').pause();
		}
	});
	
	document.addEventListener('keydown', function(e){
		if (e.keyCode == 112) {
			document.getElementById('bgvid').play(); 
		}		
	});
</script>

         
<!--------- Script Video End ---------->
#bgvid {
	object-fit: cover;
}

.video-container {
      position: absolute;
      width: 100%;
      height: 100vh;
      overflow: hidden;
}

video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
}

.video-container::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #1b1b1b;
      opacity: 0.8;
}
      <a id="home"></a>
      <div class="wrapper">


            <!--------------- hero section starts here --------------->

            <div class="video-container">
	            
                  <video preload="metadata" poster="/img/prevideo1.jpg" autoplay   muted="true" loop playsinline id="bgvid">
                   
                    <source src="videobg%20-%20converted%20with%20Clipchamp.webm" type="video/webm" alt="Your browser does not support the video tag.">
                   
                   <source src="videobg.mp4" type="video/mp4" alt="Your browser does not support the video tag."> 
                    
					<p>Your browser does not support the video tag.</p>  
					    
                  </video>
            </div>

Вот ссылка на страницу: http://avelitest.epizy.com/index.html

Однако в Chrome все работает хорошо. Я просто не понимаю, что с этим не так. Спасибо за вашу помощь!)

1 Ответ

0 голосов
/ 23 февраля 2020

"Safari ... использует автоматический механизм логического вывода c для блокировки медиа-элементов со звуком из автоматического воспроизведения по умолчанию на большинстве веб-сайтов."

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

...