HTML 5视频播放器外部控制 [英] HTML 5 video player external control

查看:439
本文介绍了HTML 5视频播放器外部控制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用html5视频播放器播放一些视频并尝试使用外部控件 javascript 。设法让玩家玩耍和停顿。但我无法使用按钮静音和取消静音。
如果有人可以帮助解决这个问题。

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.

以下是 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>

这篇关于HTML 5视频播放器外部控制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆