在mouseover上播放视频 - woocommerce平台-Java 学习之路

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

2 回答

你试过吗？

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

回复于 2024-05-19T18:52:04+08:00

示例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元素 .

试试这个..

回复于 2024-05-19T18:52:04+08:00

在mouseover上播放视频 - woocommerce平台

2 回答

相关问题