I would like to know how do I disable the Showcontrols options for HTML5 video.
This is what I want to disable:
The reason I want to disable is that If I use my custom controls and If I mouse hover I need to show my custom controls and when I leave the mouse it should hide the controls and the problem is that when I select the ShowControls the default controls is showing up which I dont want.
Can anyone suggest me how do I procees with that?
var video = document.getElementById("video"); // assuming "video" is your videos' id
video.removeAttribute("controls");
for example: http://jsfiddle.net/dySyv/1/
var myVideo = document.getElementById("video");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
<body>
<video id="video" oncontextmenu="return false;" >
<source src="https://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm" />
</video>
<br>
<button onclick="playPause()">Play/Pause</button>
</body>
Video controles are hidden here and for not to turn on it by user I added oncontextmenu="return false;"
.Context menu for video is not shown now.so user cannot turn on it.
(You can add custom context menu and also create custom controls for play/pause,seeking,to show time and also to change volume using javascript.)
Hope it helps...:)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With