Question

我是woocommerce / wordpress的新手，如果有人可以帮助我，我将不胜感激。我使用Mystile woocommerce主题创建了一个新网站。该网站将出售图像/视频。当我卡在视频页面上的缩略图上时，我想要播放视频。（他们在this website上使用的效果类似）。请告诉我这个程序？非常感谢提前

Answer 1

你试过吗

<video poster="image.jpg" src="video.webm" id="id0" width="300" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video.webm';id0.pause()" loop title="video.webm
" ></video>

Answer 2

示例Html

<div class="thumbail">
<video preload="auto" loop>
    <source src="videos/movie.webm" type="video/webm">
    <source src="videos/movie.mp4" type="video/mp4">
    <source src="videos/movie.ogv" type="video/ogg">
</video>
</div>

使用javascript播放鼠标悬停视频

play不是jQuery函数，而是DOM元素的函数。因此，您需要在DOM元素上调用它。

 $(document).ready(function(){
  $(".thumbnail").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();
        $(this).children("video").get(0).currentTime = 0;
    });
});

注意：get用于从jQuery选择中获取本机DOM元素。

试试这个..

在mouseover上播放视频 - woocommerce平台

2 个答案: