Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 disable default controls

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?

enter image description here

like image 804
coder Avatar asked Mar 24 '12 18:03

coder


2 Answers

var video = document.getElementById("video"); // assuming "video" is your videos' id
video.removeAttribute("controls");

for example: http://jsfiddle.net/dySyv/1/

like image 168
Marty Cortez Avatar answered Nov 14 '22 00:11

Marty Cortez


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...:)

like image 42
SreYash Avatar answered Nov 14 '22 00:11

SreYash