Fatal编程技术网
  • javascript/
  • Javascript 如何通过鼠标悬停播放/暂停多个视频

Javascript 如何通过鼠标悬停播放/暂停多个视频

javascript html

Javascript 如何通过鼠标悬停播放/暂停多个视频,javascript,html,Javascript,Html,我有一个有很多视频的页面，希望播放 mouseOver和mouseOut上的每个视频暂停 它与video1一起工作，但我想与video2一起工作，等等 <!DOCTYPE html> <html> <body> <div style="text-align:center"> <video id="video1" width="420" onmouseover="playPause()" onmouseout="playPause

我有一个有很多视频的页面，希望播放 
mouseOver
和
mouseOut
上的每个视频暂停

它与video1一起工作，但我想与video2一起工作，等等

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


您的浏览器不支持HTML5视频。
您的浏览器不支持HTML5视频。
var myVideo=document.getElementById（“video1”）；
函数playPause（）
{ 
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
您需要传递对要播放/暂停的视频的引用。f、 例：

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


您的浏览器不支持HTML5视频。
您的浏览器不支持HTML5视频。
功能播放暂停（videoID）
{ 
var myVideo=document.getElementById（videoID）；
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
使用
此
关键字：

onmouseover="playPause(this)"
在Javascript中：

function playPause(video) {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}
根据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> 


您的浏览器不支持HTML5视频。
您的浏览器不支持HTML5视频。
使用此代码，尽情享受吧！ ///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>
//脚本

// 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")
}
谢谢，它工作得很好，但是带有“this”关键字的解决方案对我来说更好。@这确实是一个更动态的解决方案。基于此；使用
onmouseover=“this.play（）”
和
onmouseout=“this.pause（）”
应该有同样的效果？@mariusn确实如此。我错过了OP也在mouseout上调用playPause函数。 
// 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")
}