HTML 5视频播放器外部控制

HTML 5 video player external control

本文关键字：外部 控制 播放器 视频 HTML      更新时间：2023-09-26

我正在使用html5视频播放器播放一些视频，并尝试使用javascript的外部控件。设法让玩家上场并暂停。但我无法使用按钮使其静音和取消静音
如果有人能帮上这件事，那就大错特错了。

这是HTML代码

<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
  <source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>

JavaScript代码

function playMymovie() {
    var element = document.getElementById('myMovie');
    var element = document.getElementById('pbutton');
    playButton.addEventListener('click', PlayOrPause, false);
    volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
    if(!myMovie.paused && !myMovie.ended) {
        myMovie.pause();
}else{
    myMovie.play()
}
}
function VolMute(){
  if(!myMovie.muted){
     myMovie.muted(true);
  }else{
    myMovie.muted(false);  
  }
}

提前谢谢。

<html> 
<body> 
<div style="text-align:center"> 
 <button onclick="playPause()">Play/Pause</button> 
<button onclick="muteUnMute()">Mute/UnMute</button> 
     <br> 
<video id="video1" width="420">
 <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(); 
} 
function muteUnMute()
{ 
    if( !myVideo.muted)
 myVideo.muted='muted';
else
myVideo.muted=false;
} 

</script> 
</body> 
</html>

试试这个：

var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;
相关文章：