Video.js Enter Fullscreen On Play

I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have

Solution 1:

There are a two problems to be solved here.

First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.

The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.

Here are some options for how to handle this:

1. Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.

2. Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.

3. Use an older version of video.js and wait until 4.x is ready for prime time.

4. Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.

I recommend 2 or 3.

Update: It looks like this particular issue has been fixed, but it has not made it into release yet.

Solution 2:

I personally used a custom link that triggers both play and fullscreen.

<aclass="enter-fullscreen"href="#">Play fullscreen</a>

And the js part:

<scripttype="text/javascript">

    $('.enter-fullscreen').click(function(e) {
        e.preventDefault();
        $('.vjs-play-control').click();
        $('.vjs-fullscreen-control').click();
    });

</script>

This is improvable but simple and does the job.

Solution 3:

One easy way to solve the problem:

document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)

Video goes full screen and the regular event of the play button causes it to start playing.

Solution 4:

in video.js file go to this lines

BigPlayButton.prototype.handleClick = functionhandleClick(event) {

        var playPromise = this.player_.play();

and add

BigPlayButton.prototype.handleClick = function handleClick(event) {

var playPromise = this.player_.play();
        document.getElementsByClassName('vjs-fullscreen-control')[0].click()
        // exit early if clicked via the mouseif (this.mouseused_ && event.clientX && event.clientY) {
            silencePromise(playPromise);
            return;
        }