Javascript 悬停时播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26778714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video play on hover
提问by Oliver Chalmers
I have a selection of video thumbnails that I want to trigger to play/pause on hover. I have managed to get one of them to work, but I run into a problem with the others on the list. Attached is the fiddle of my code. There will be a div covering each html5 video so the hover needs to delegate to the video, which i'm unsure as to how to do.
我有一些视频缩略图，我想在悬停时触发播放/暂停。我已经设法让其中一个工作，但我遇到了列表中其他人的问题。附件是我的代码的小提琴。将有一个 div 覆盖每个 html5 视频，因此悬停需要委托给视频，我不确定该怎么做。
Preview of the html here -
在这里预览 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>
Preview of the javascript here -
在这里预览 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();
}
Thank you very much for your help.
非常感谢您的帮助。
Oliver
奥利弗
回答by Emil Hov
Shortest version would be this one
最短的版本是这个
<div>
<video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
<source src="yourVideo.ogg" type="video/ogg"></source>
</video>
</div>
This way it would be a bit cleaner, if you desire that.
如果你愿意的话，这样它会更干净一些。
回答by Gabriele Petrioli
Why are you uisng native event binding together with jQuery ?
为什么要与 jQuery 一起使用本机事件绑定？
Anyway, if you want to handle the events natively you can use the .bindmethodand pass the index of each video to the handlers
无论如何，如果您想本地处理事件，您可以使用该.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();
}
Demo at http://jsfiddle.net/gaby/0o8tt2z8/2/
演示在http://jsfiddle.net/gaby/0o8tt2z8/2/
Or you can go full jQuery
或者你可以使用完整的 jQuery
var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
回答by Shawn Erquhart
The hoverVideo()function specifically calls for the first instance of .thevideo, so hovering over either one will play the first video.
该hoverVideo()函数专门调用 的第一个实例.thevideo，因此将鼠标悬停在任一实例上将播放第一个视频。
You have to grab the element that the event occurred on, then find the .thevideoelement within that element:
您必须获取发生事件的.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();
}
Here's an updated fiddle:http://jsfiddle.net/52mxdbgy/1/
这是一个更新的小提琴：http : //jsfiddle.net/52mxdbgy/1/
回答by Jean-Paul
Your function explicitly asks for the first video: $('.thevideo')[0].play();(first element in array).
您的函数明确要求第一个视频：（$('.thevideo')[0].play();数组中的第一个元素）。
Therefore, you need to (at least) pass the index of the video to which you bind the actions to ensure the right video gets played and paused.
因此，您需要（至少）传递绑定动作的视频的索引，以确保播放和暂停正确的视频。
For example:
例如：
$(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();
}
Where I use jQuery's .on()method so all methods are jQuery (instead of a mix with JavaScript).
我使用 jQuery 的.on()方法，所以所有方法都是 jQuery（而不是与 JavaScript 的混合）。
You can see this in action in the following jsFiddle:
您可以在以下 jsFiddle 中看到这一点：
DEMO
演示
回答by teawithfruit
Here the same without jQuery and with a bit ES6. ;)
这里同样没有 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);
}
