HTML5视频与自定义控件

Question

我有很大的问题。 你需要知道我是这个初学者。 我有这样的代码

<video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="autoplay" loop="loop" id="player"> 

我想补充控制播放，暂停和静音/取消静音图像按钮切换。 所以，我有图像播放，暂停，静音和取消静音。 唯一我需要的是静音按钮被取消点击与取消静音按钮和相反。 请记住视频开始静音，然后如果访客想要他可以取消静音。 我希望我很清楚。 我在这里阅读了很多关于stackoverflow，但现在有解决方案。我试过什么都行不通。 请张贴我的工作例如上的jsfiddle

和图标需要在视频中，左下角

这里有图标

玩法：http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png

暂停：http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png

静音： omn​​iawebfactory .com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png

unmuted：omniawebfactory .com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png

Answer 1

var video = document.getElementById('player'); 
 
\t video.volume = 0; 
 
var muteBtn = document.getElementById('mute'); 
 
var playPause = document.getElementById('play'); 
 
playPause.addEventListener('click',playPauseit); 
 
muteBtn.addEventListener('click',mute); 
 

 
function playPauseit(){ 
 
    if(playPause.src == 'http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png'){ 
 
    video.pause(); 
 
    playPause.src = 'http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png'; 
 
    } 
 
    else{ 
 
    video.play(); 
 
    playPause.src = 'http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png'; 
 
    } 
 
    } 
 

 
function mute(){ 
 
\t if(video.volume == 1){ 
 
\t video.volume = 0; 
 
\t muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png"; 
 
\t } 
 
\t else{ 
 
\t \t video.volume = 1; 
 
\t muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png"; 
 
\t } 
 
}

.buttons{ 
 
display:block; 
 
width:50px; 
 
height:50px; 
 
background-color:black; 
 
float:left; 
 
} 
 
#control{ 
 
width:1000px; 
 
height:50px; 
 
clear:both; 
 
background-color:black; 
 
}

<video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="true" loop="true" id="player"></video> 
 

 
<div id="control"> 
 
<img class="buttons"src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" id="play"/> 
 
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png" id="mute"> 
 
</div>

Answer 2

已经有一个内置的控件给你。只需将控件添加到视频标签。