admin管理员组

文章数量:1421461

I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons.
if someone can help with this matter its highly appropriated.

Here is the HTML code

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

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

  }

}

Thanks in advance.

I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons.
if someone can help with this matter its highly appropriated.

Here is the HTML code

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

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

  }

}

Thanks in advance.

  • javascript
  • html
Share Improve this question edited Jul 12, 2013 at 6:47 AndroidLearner 4,6945 gold badges35 silver badges67 bronze badges asked Jul 12, 2013 at 6:40 maxlkmaxlk 1,0576 gold badges18 silver badges35 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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>

Try this:

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

本文标签： javascriptHTML 5 video player external controlStack Overflow

版权声明：本文标题：javascript - HTML 5 video player external control - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745350226a2654723.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。