悬停视频播放

Question

我有一些视频缩略图，我想触发它​​们在悬停时播放/暂停。我已经设法让其中一个工作，但我遇到了与列表中的其他人有关的问题。附件是我的代码的小提琴。将有一个 div 覆盖每个 html5 视频，因此悬停需要委托给视频，我不确定该怎么做。

https://jsfiddle.net/meh1aL74/

在此处预览 html -

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

在这里预览 JavaScript -

    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

最短的版本是这个

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

如果你愿意，这样会更干净一些。

Answer 2

为什么要将原生事件绑定与 jQuery 一起使用？

无论如何，如果您想在本地处理事件，您可以使用.bind method 并将每个视频的索引传递给处理程序

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(); 
}

http://jsfiddle.net/gaby/0o8tt2z8/2/的演示

---

或者你可以使用完整的 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 3

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 4

您的函数明确要求第一个视频：$('.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 5

这里没有 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);
}