CODEWITHSUNDEEP
htmlgoogle-chromehtml5-video
Vishnu
Vishnu

Reputation: 2110

How to disable default controls on a full screen HTML5 video?

I have a video of a specified width and height, double clicking on which makes it go full screen using videoElement.webkitRequestFullScreen(). By default the video does not have any controls. But for some reason, on going full screen, the default controls pop up. Here is what I'm doing :

<video id="videoId" width="320" height="240" autoplay="autoplay" ondblclick="enterFullScreen('videoId')" src="Blah.mp4"></video>

And the enterFullScreen(...) function is defined as : 

function enterFullScreen(elementId) {
    var element = document.getElementById(elementId);
    element.webkitRequestFullScreen();
    element.removeAttribute("controls");
}

As you can see, I've already tried removing the controls in the function. But to no avail.

Could someone tell me how to prevent this auto insertion of default controls from happening?

Upvotes: 9

Views: 24995

Answers (6)

Harshit Jaiswal
Harshit Jaiswal

Reputation: 1

A CSS only solution:

video::-webkit-media-controls-fullscreen-button {
  pointer-events: none;
  opacity: .5;
}

Upvotes: 0

user1702401
user1702401

Reputation: 1658

This is possible to solve with CSS, as described here: HTML5 video does not hide controls in fullscreen mode in Chrome

video::-webkit-media-controls {
  display:none !important;
}

Upvotes: 14

Vishnu
Vishnu

Reputation: 2110

Finally, I found a way around this. As Alexander Farkas suggested, I wrapped the video in another div, and I set this parent div to go full screen, after which I set the height and width of the video to screen.height and screen.width respectively. And I restored the original properties of both the divs on exiting full screen.

Pseudo Code :

HTML :

<div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>

JavaScript :

function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();           
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);

Upvotes: 7

alexander farkas
alexander farkas

Reputation: 14134

If a video goes fullscreen, the user agent should show the controls, also if controls attribute is absent.

Newer user agents also support fullscreen API on any element. Therefore you can try the following: 

element.parentNode.webkitRequestFullScreen();

Upvotes: 1

Ian Devlin
Ian Devlin

Reputation: 18870

Normally the following should work:

var videoPlayer = document.getElementById('videoId');
videoPlayer.controls = false;

But I'm not sure if jumping into full screen mode will override it.

Upvotes: 0

Ankit
Ankit

Reputation: 690

You can find the id of div containing the controls and disable it using javascript. e.g if id of div that is containing the controls is "controldiv" then in your function you can write

var ctrls = document.getElementById("controldiv");
ctrls.disabled="true";

Upvotes: 0

Related Questions