-1

请查看以下页面，在单击其中的任何位置之前，将鼠标悬停在视频上并检查您的控制台 - 引发错误并且视频无法播放...

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

jQuery代码：

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

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

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

错误：未捕获（承诺）DOMException

但是，当您单击页面上的某个位置然后将视频悬停时，它会播放并且不会引发任何错误。我在我的网站上使用相同的代码，因此我想修复它。这太奇怪了！

4

1 回答 1

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: 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>

于 2019-02-28T22:22:04.577 回答