悬停时的视频播放

Question

我有一系列视频缩略图,我想在悬停时触发播放/暂停.我设法让其中一个工作,但我遇到了列表中其他人的问题.附件是我的代码的小提琴.将有一个div覆盖每个html5视频,因此悬停需要委托给视频,我不确定如何做.

http://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

为什么你用jQuery本地事件绑定？

无论如何,如果您想要本机处理事件,您可以使用该.bind方法并将每个视频的索引传递给处理程序

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 2

最短的版本是这个

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

这样，如果您愿意的话，它会更干净一些。