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（）失败，因为用户未与文档进行交互第一。

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>

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

1 个答案: