懸停時的視頻播放

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> 

這樣，它會有點清潔劑，如果你的願望說。