悬停时播放视频
Video play on hover
我有一系列视频缩略图,我想触发它们在悬停时播放/暂停。我设法让其中一个工作了,但我遇到了名单上其他人的问题。附件是我的密码。每个html5视频都会有一个div,所以悬停需要委托给视频,我不确定该怎么做。
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();
}
非常感谢你的帮助。
最短的版本应该是这个。不需要任何花哨的jQuery,只需要简单的HTML:
<div>
<video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
<source src="yourVideo.ogg" type="video/ogg"></source>
</video>
</div>
这样稍微干净一点。
为什么使用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/
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/
这里没有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);
}
函数明确要求第一个视频:$('.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中看到这一点:
演示
- 如何检查用户在html5视频播放器中观看了完整的视频
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- html5视频播放器和视频js之间的关系
- 视频播放器错误promise DOMException中未捕获
- html视频播放器并不总是从src读取
- HTML 5视频播放器用给定的数字更新currentTime
- html5视频交互式视频播放器
- 如何构建自己的 VAST 视频播放器
- 如何专注于YouTube视频播放器对象
- HTML5视频播放/停止按钮与Javascript
- 如何在前台弹出YouTube视频播放器
- 如何在悬停在图像上时弹出youtube视频播放器
- 将Backbone事件与HTML5视频播放事件结合使用
- 移动设备的动态视口始终包含固定尺寸的视频播放器
- 浏览器同步摄像头加速视频播放不是一个功能
- 使用MediaSource扩展播放视频播放列表
- 当我在视频播放器上单击播放时,它会在页面上播放两个视频
- 嵌入视频播放器播放按钮可同时播放所有视频播放器
- 设置计时器以等待为flash回退视频播放器加载swfobject脚本
- 三星智能电视视频播放器应用程序-访问存储在USB上的mp4