Dragana Pavlović Dragana Pavlović - 1 month ago 11
CSS Question

HTML5 Video with custom controls

I am having big issue.
You need to know i am beginner with this.
I have this code

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


I want to add controls PLAY, PAUSE and MUTE/UNMUTE image button toggle.
So, i have images for play, pause, mute and unmute.
Only thing i need is mute button to be replaced on click with unmute button and reverse.
Keep in mind video starts muted, then if visitor want he can unmute it.
I hope i was clear enough.
I read a lot here on stackoverflow but there is now solution. what ever i try it won't work.
Please post me working example on JSFiddle

and icons need to be ON video, in left corner

Here are icons

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

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

muted: 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

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>

Comments