Ryan Weiss Ryan Weiss - 2 months ago 10
Javascript Question

HTML5 Video: Hiding controls does not work in internet explorer, removeAttr, removeProp, etc

Trying to hide and show the video controls on hover enter / hover leave:

$('#content-video').hover(function(event) {
if(event.type === "mouseenter") {
console.log("ENTER");
$(this).attr("controls", true);
} else if(event.type === "mouseleave") {
console.log("EXIT");
$(this).attr("controls", false);
$(this).prop("controls", false);
$(this).removeAttr("controls");
$(this).removeProp("controls");
currentVideo.removeAttribute('controls');
}
})


Have tried everything. The ENTER and EXIT messages show properly, as expected, in Internet explorer, but the 'controls="true"' stays on the element and the controls stay visible on mouseleave! Any ideas why? Grumble.

Answer
document.getElementById("myVideo").controls = false;
Comments