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

已經有一個內置的控件給你。只需將控件添加到視頻標籤。