Andruraj Andruraj - 9 days ago 5
Javascript Question

html5 video custom controls

I'm trying to make a custom player design and was following html5 custom controls tutorials and hit upon a problem.

On executing unmute it shows "[objectHTML button ELement]", so what do i do?

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<video id="myVideo" width="640" height="320" autoplay>
<source src="http://vjs.zencdn.net/v/oceans.mp4"></source>
</video><br>
<button id="plbn" onclick="playPause()">Pause</button>
<button id="mute" onclick="mutevol()">Mute</button>

<script>
var vid = document.getElementById("myVideo");
function playPause() {
var plbtn = document.getElementById("plbn");
if (vid.paused)
{vid.play();plbtn.innerHTML = "Pause";}
else
{vid.pause();plbtn.innerHTML = "Play";}
}
function mutevol() {
var mutebtn = document.getElementById("mute");
if(vid.muted == true)
{vid.muted = false;
mutebtn.innerHTML = mute;}
else
{vid.muted = true;
mutebtn.innerHTML = unmute;} /*On execution it shows "[objectHTML button ELement]", so what do i do? */
}
</script>
</body>
</html>


Thanks

Answer

mute and unmute should be strings, so use following:

mutebtn.innerHTML = "unmute";
mutebtn.innerHTML = "mute";
Comments