HTML 5视频播放器外部控制

时间:2013-07-12 06:40:44

标签: javascript html html5

我正在使用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);  

  }

}

提前致谢。

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

试试这个:

var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;