悬停时的视频播放

Question

我有一些视频缩略图可供选择，以便在悬停时触发播放/暂停。我设法让他们中的一个人工作，但我遇到了列表中其他人的问题。附加是我的代码的小提琴。将有一个div覆盖每个html5视频，所以悬停需要委托给视频，我不确定如何去做。

http://jsfiddle.net/meh1aL74/

这里的HTML预览 -

这里的JavaScript的

<div class="video"> 
      <div class="videoListCopy"> 
       <a href="videodetail.html" class="buttonMore"> 
         <div class="breaker"><div class="line"></div></div> 
         <div class="buttonContent"> 
          <div class="linkArrowContainer"> 
           <div class="iconArrowRight"></div> 
           <div class="iconArrowRightTwo"></div> 
          </div> 
          <span>Others</span> 
         </div> 
        </a> 
      </div> 
      <div class="videoSlate"> 
       <video class="thevideo" loop> 
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"> 
       Your browser does not support the video tag. 
       </video> 
      </div> 
     </div> 


      <div class="video"> 
      <div class="videoListCopy"> 
       <a href="videodetail.html" class="buttonMore"> 
         <div class="breaker"><div class="line"></div></div> 
         <div class="buttonContent"> 
          <div class="linkArrowContainer"> 
           <div class="iconArrowRight"></div> 
           <div class="iconArrowRightTwo"></div> 
          </div> 
          <span>Others</span> 
         </div> 
        </a> 
      </div> 
      <div class="videoSlate"> 
       <video class="thevideo" loop> 
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"> 
       Your browser does not support the video tag. 
       </video> 
      </div> 
     </div> 

预览 -

var figure = $(".video"); 
    var vid = $("video"); 

    [].forEach.call(figure, function (item) { 
      item.addEventListener('mouseover', hoverVideo, false); 
      item.addEventListener('mouseout', hideVideo, false); 
    }); 

    function hoverVideo(e) { 
      $('.thevideo')[0].play(); 
    } 

    function hideVideo(e) { 
      $('.thevideo')[0].pause(); 
    } 

非常感谢您的帮助。

奥利弗

Answer 1

你为什么uisng机事件绑定在一起的jQuery？

无论如何，如果你想在本地处理的事件，你可以使用.bind method和http://jsfiddle.net/gaby/0o8tt2z8/2/

---

每个视频的索引传递到处理程序

var figure = $(".video"); 
var vid = figure.find("video"); 

[].forEach.call(figure, function (item,index) { 
    item.addEventListener('mouseover', hoverVideo.bind(item,index), false); 
    item.addEventListener('mouseout', hideVideo.bind(item,index), false); 
}); 

function hoverVideo(index, e) { 
    vid[index].play(); 
} 

function hideVideo(index, e) { 
    vid[index].pause(); 
} 

演示或者你可以去全jQuery

var figure = $(".video").hover(hoverVideo, hideVideo); 

function hoverVideo(e) { $('video', this).get(0).play(); } 
function hideVideo(e) { $('video', this).get(0).pause(); } 

演示在http://jsfiddle.net/gaby/0o8tt2z8/1/

Answer 2

的hoverVideo()功能明确要求的.thevideo一审，所以鼠标悬停在任何一个会玩的第一个视频。

你必须抓住所发生的事件的元素，然后找到元素中的.thevideo元素：

var figure = $(".video"); 
var vid = $("video"); 

[].forEach.call(figure, function (item) { 
    item.addEventListener('mouseover', hoverVideo, false); 
    item.addEventListener('mouseout', hideVideo, false); 
}); 

function hoverVideo(e) { 
    $(this).find('.thevideo')[0].play(); 
} 

function hideVideo(e) { 
    $(this).find('.thevideo')[0].pause(); 
} 

这里有一个更新的小提琴：http://jsfiddle.net/52mxdbgy/1/

Answer 3

您的函数明确要求输入第一个视频：$('.thevideo')[0].play();（数组中的第一个元素）。

因此，您需要（至少）通过绑定动作的视频索引，以确保正确的视频播放和暂停。

例如：

$(document).ready(function() {  
    $('.video').each(function(i, obj) { 
     $(this).on("mouseover", function() { hoverVideo(i); }); 
     $(this).on("mouseout", function() { hideVideo(i); }); 
    }); 
}); 

function hoverVideo(i) { 
    $('.thevideo')[i].play(); 
} 

function hideVideo(i) { 
    $('.thevideo')[i].pause(); 
} 

我在哪里使用jQuery的.on()方法，这样的方法都jQuery的（而不是使用JavaScript的混合）。

您可以在下面的jsfiddle在行动中看到这一点：

DEMO

Answer 4

这里没有jQuery和带着几分ES6相同。;）

for(let tupel of document.querySelectorAll('video')) { 
    tupel.addEventListener('mouseover', (e) => { 
    e.target.play() 
    }, false); 

    tupel.addEventListener('mouseout', (e) => { 
    e.target.pause() 
    }, false); 
} 

Answer 5

最短的版本会是这样一个

<div> 
    <video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;"> 
    <source src="yourVideo.ogg" type="video/ogg"></source> 
    </video>  
</div> 

这样，它会有点清洁剂，如果你的愿望说。