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年以来，有一项新的“规则”涉及在大多数“现代”浏览器中触发视频播放。 See this Google's dev blog post。现在，它要求用户在程序化触发之前至少与页面“互动”一次。

因此，我建议您寻找一种方法，让用户至少单击您网页中的某项内容...它几乎是无用的按钮和标志，以确保防止错误发生。

在下面看看。同样在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: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
-->
<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>

新的“未捕获（承诺）DOMException”问题

1 个答案: