Andruraj Andruraj - 5 months ago 50
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>
<video id="myVideo" width="640" height="320" autoplay>
<source src=""></source>
<button id="plbn" onclick="playPause()">Pause</button>
<button id="mute" onclick="mutevol()">Mute</button>

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



mute and unmute should be strings, so use following:

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