如何通过鼠标悬停播放/暂停多个视频
How can I play/pause more than one video by mouseover
我有一个页面有很多视频,想玩 每个视频mouseOver
,暂停mouseOut
。
它正在使用视频 1,但我想处理视频 2 等等。
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<video id="video1" width="420" onmouseover="playPause()" onmouseout="playPause()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="video2" width="420" onmouseover="playPause()" onmouseout="playPause()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
</body>
</html>
根据 Etienne Miret 的回答,最小实现根本不需要特定的函数。
只需设置onmouseover="this.play()"
和onmouseout="this.pause()"
就可以解决问题:
<div style="text-align:center">
<video id="video1" width="420" onmouseover="this.play()" onmouseout="this.pause()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="video2" width="420" onmouseover="this.play()" onmouseout="this.pause()">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
使用 this
关键字:
onmouseover="playPause(this)"
在你的 Javascript 中:
function playPause(video) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
您需要传递对要播放/暂停的视频的引用。 f.ex:
<div style="text-align:center">
<video id="video1" width="420" onmouseover="playPause('video1')" onmouseout="playPause('video1')">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="video2" width="420" onmouseover="playPause('video2')" onmouseout="playPause('video2')">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
function playPause(videoID)
{
var myVideo=document.getElementById(videoID);
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
使用此代码并享受!////.HTML
<div class="hov">
<div id="video1" class="sel">
<video width=640 src="assets/videos/ve.mp4"></video>
<div class="controls" style="display:none">
<button>Play</button>
</div>
</div>
</div>
风格.css
.sel {
position:relative;
display:inline-block;
font-size:16px;
z-index:0;
}
.sel > .controls:hover {
position:absolute;
width:100%;
background:rgba(255,255,255,0.3);
padding:7px;
box-sizing:content-box;
z-index:10000;
}
.sel > .controls{
position:absolute;
bottom:0;
width:100%;
background:rgba(255,255,255,0.3);
padding:7px;
box-sizing:content-box;
z-index:10000;
top: 150px;
}
//脚本
// self hosted video controler//
var $sel = $("#video1");
var $video = $sel.children("video"), video = $video[0]
var $controls = $sel.children(".controls");
var $play = $controls.children("button");
// control visibility
$sel.on("mouseover mouseout", function(e) {
$controls.css("display", e.type === "mouseout" && video.paused ? "none" : "block");
$controls.css("display", e.type === "mouseover" && video.play ? "block" : "none");
});
// play or pause
$play.on("click", toggle);
$video.on("click", toggle);
function toggle() {
video[video.paused ? "play" : "pause"]();
}
// todo: cover more events (seeked, error etc.)
$video.on("play pause ended", updateUI);
// update control UI elements (todo: update time/progress etc.)
function updateUI() {
$play.text(video.paused ? "Play" : "Pause")
}
相关文章:
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 在内联颜色框中加载mediaelementjs,在关闭时暂停视频
- 我正在从API提取一个包含视频的Object标签.如何在javascript中暂停视频
- 如何在一定时间后暂停视频?video.js
- 是否可以间隔暂停视频,并请求验证码以继续播放
- 如何在 jQuery 中播放和暂停视频
- 无法在移动设备中通过 jquery 暂停视频
- 使用 JQuery/JavaScript 暂停视频播放
- JQuery 从第二个零开始播放 html5 视频,但如果用户暂停视频,则保留当前帧
- 使用 .play() 通过按回车键播放/暂停视频
- 如何在没有控件的情况下暂停视频.js视频
- 如果当前时间 >= 2,则暂停视频
- 如何在接听电话时暂停视频播放
- 播放其他视频时暂停视频-关闭后继续
- 如何暂停视频时,焦点离开我的网页(html5)
- 点击firefox播放/暂停视频
- 使用播放和暂停视频
- 使用.animate() [JavaScript]暂停视频进度条
- Html5视频-点击屏幕播放/暂停视频
- 用firstChild暂停视频