Question

我遇到了大问题。你需要知道我是初学者。我有这个代码

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

我想添加控件PLAY，PAUSE和MUTE / UNMUTE图像按钮切换。所以，我有播放，暂停，静音和取消静音的图像。我唯一需要的是静音按钮，用非静音按钮替换并反转。请记住视频开始静音，如果访问者希望他可以取消静音。我希望我很清楚。我在这里读了很多关于stackoverflow但现在有解决方案。什么我尝试它将无法正常工作。请在JSFiddle上发布我的工作示例

并且图标需要为ON视频，位于左下角

这是图标

播放：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

静音：omniawebfactory .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

已经有了内置控件。只需将控件添加到视频标记即可。

Answer 2

var video = document.getElementById('player');
	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(){
	if(video.volume == 1){ 
	video.volume = 0; 
	muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
	}
	else{
		video.volume = 1;
	 muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
	}
}

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

带自定义控件的HTML5视频

2 个答案: