НОВАЯ проблема "Uncaught (в обещании) DOMException"

Question

Посмотрите на следующую страницу и, прежде чем щелкнуть где-нибудь на нем, наведите курсор на видео и проверьте свою консоль - выдается ошибка, и видео не воспроизводится ...

https://codepen.io/gil--/pen/bNxZWg

Jquery code:

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

ОШИБКА: необработанное (в обещании) DOMException

Однако, когда вы щелкаете где-то на странице и затем наводите курсор мыши навидео, оно воспроизводится и никаких ошибок не выдается.Я использую тот же код на своем сайте, поэтому я бы хотел это исправить.Это супер странно!

Answer 1

Причина ошибки заключается в том, что с 2016 года существует новое «правило» о запуске воспроизведения видео в большинстве «современных» браузеров. См. Это сообщение в блоге разработчика Google .Теперь требуется, чтобы пользователь «взаимодействовал» со страницей хотя бы один раз перед запрограммированным триггером.

Поэтому я предлагаю вам найти способ заставить пользователя хотя бы щелкнуть мышью на какой-нибудь странице вашего сайта ...почти бесполезная кнопка и флажок, чтобы предотвратить ошибку.

Посмотрите ниже.Также на CodePen

Я уверен, что вы можете иметь эту кнопку (или любое приглашение по клику) симпатичнее;)

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
  if(playEnabled){ 
    $('video', this).get(0).play();
  }
}

function hideVideo(e) {
  if(playEnabled){
    $('video', this).get(0).pause(); 
  }
}

var playEnabled = false;
$("#enablePlay").on("click",function(){
  playEnabled = true;
  $(this).html("Video play enabled!");
});

#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--
Data: https://gfycat.com/cajax/get/VerifiableTerrificHind
 
Source: https://www.youtube.com/watch?v=nZcejtAwxz4

More info on youtube api for thumbnails: /2029038/kak-poluchit-miniatyru-video-youtube-iz-api-youtube
-->
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>
<button id="enablePlay">Click here to play the video on mouse over</button>