javascript - 悬停时自动播放视频的图像缩略图

Question

我正在尝试为我的 php 项目制作图像缩略图，该项目会在鼠标悬停时自动更改为正在播放的视频，并使用 javascript 返回图像。像这个例子:https://store.steampowered.com/labs/microtrailers?flavor=fire_hose_roguelike_3_pages

不幸的是，由于某种原因，它无法正常工作。该视频有时仅在点击几下后才会在 Chrome 上自动播放，而在 Firefox 上的响应速度似乎更慢……此外，图像和视频之间的转换也无法正常工作……

我遵循了很多示例和 StackOverflow 的答案，但似乎没有什么能正常工作。我有什么想法可以让这项工作成功吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="card">
         <img class="card-top" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg" alt="">
         <video class="isvideo" loop preload="none">
      <source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
    </video>
</div>

<script>
$('.card').hover(hoverVideo, hideVideo);

function hoverVideo(e) {  
        $('video', this)[0].play(); 
        $('.card-top').hide();
    }

    function hideVideo(e) {
        $('video', this)[0].pause();
        $('.card-top').show();
    }
</script>

Answer 1

您的代码抛出以下异常:

play() failed because the user didn't interact with the document first.

Chrome 有 changed it's policy about autoplaying videos ，但声明“始终允许静音自动播放”。因此，您可以通过将 muted 属性添加到视频标签来让视频无声播放，如下所示:

$('.card').hover(hoverVideo, hideVideo);

function hoverVideo(e) {
  $('video')[0].play().catch(function(e) {
		console.log(e.message);
  }); 
  $('.card-top').hide();
}

function hideVideo(e) {
  $('video')[0].pause();
  $('.card-top').show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
         <img class="card-top" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg" alt="">
         <video class="isvideo" loop preload="none" muted>
      <source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
    </video>
</div>