新 "Uncaught (in promise) DOMException" 问题

Question

查看以下页面，在点击其中的任何地方之前，将鼠标悬停在视频上并检查您的控制台 - 出现错误并且视频无法播放...

Jquery代码：

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 年以来有一个新的 "rule"，关于在大多数 "modern" 浏览器中触发视频播放。 See this Google's dev blog post。它现在要求用户 "interact" 在程序触发之前至少访问该页面一次。

所以我建议你找到一种方法让用户至少点击你网页中的某个地方...它是一个几乎无用的按钮和一个标志以确保防止错误。

往下看。同样在 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: 
-->
<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>

新 "Uncaught (in promise) DOMException" 问题

NEW "Uncaught (in promise) DOMException" Problem

jquery

hover

domexception