乔姆拉 K2 项目图像悬停

Question

>Hy，

有没有办法将鼠标悬停在项目图像上，但是悬停何时播放视频？

像这样但不在弹出窗口中：演示

提前致谢

Answer 1

这不可能开箱即用。我确信这是一个付费扩展，但如果你想用老式的方式编码它，你可以使用 jQuery 和 HTML5 视频播放器来实现这一点。

  <video id="video" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <a id="thumbnail">Im the thumbnail</a>
<script>
jQuery(document).ready(function($) {
   jQuery('#thumbnail').hover(function() {
     jQuery('#video').show(); 
       jQuery('#video').play(); 
   }, function() {
          jQuery('#video').hide(); 
       jQuery('#video').pause(); 
   });
 }); 
</script>

我的建议是通过数据属性链接视频和缩略图：

例如

<a id="thumbnail" data-video="#video"></a>
<script>
jQuery(document).ready(function($) {
   jQuery('#thumbnail').hover(function() {
     jQuery(jQuery(this).data('video')).show(); 
       jQuery(jQuery(this).data('video')).play(); 
   }, function() {
          jQuery(jQuery(this).data('video')).hide(); 
       jQuery(jQuery(this).data('video')).pause(); 
   });
 }); 
</script>

或使其相对于多个视频的父容器。