在鼠标悬停上播放视频 - woocommerce 平台答案

【问题标题】：Play the video on mouseover - woocommerce platform在鼠标悬停上播放视频 - woocommerce 平台
【发布时间】：2015-06-23 05:54:13
【问题描述】：

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

【问题讨论】：

你的页面链接是什么？到目前为止你做了什么
请参考这里。有一个类似的特点。 jsfiddle.net/gaby/0o8tt2z8/2
亲爱的 Rahul，谢谢你的链接，但我的问题是我不知道如何在 woocommerce 平台上使用它？所有视频都将作为数字产品添加到网站上。你能帮我解决这个问题吗？非常感谢

标签： javascript php jquery wordpress woocommerce

【解决方案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>

【讨论】：

亲爱的 Sarath，感谢您的回复，但我需要一种在 woocommerce 平台上执行此操作的方法。因为所有的视频都将被添加为数字产品。我想知道我应该为此编辑哪个编码部分？你能帮我做这件事吗？非常感谢
将视频添加为产品？
是的，这个网站是卖视频和图片的，我会通过woocommerce平台添加视频和图片缩略图。当用户访问视频页面时，我希望他们在将鼠标悬停在缩略图上时播放视频。
亲爱的 Sarath，非常感谢，此代码对我有用，但是如何将此代码添加到产品的特色图片中？我希望这是视频的缩略图吗？请帮助我，谢谢
您是否尝试将 poster="image.jpg" 设置为特色图片。 ?如果它有助于标记答案。

【解决方案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 元素。

试试这个..

【讨论】：

尊敬的副总裁，感谢您的回复，请告诉我如何将其包含在 wordpress / woocommerce 平台上？这些视频作为数字产品添加到网站上。由于我是这个平台的新手，我不知道应该在哪里添加这些？提前非常感谢