Video.js enter fullscreen on play

Question

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 many examples but none of them seem to work.

The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.

The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.

Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.

Example:

player1 = _V_('video-1');

player1.on("play",
    function () {
        this.requestFullScreen();
});

player1.on("ended",
    function () {
        this.cancelFullScreen();
});

The code generates this error:

Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'

I am working with the latest version of Google Chrome.

Answer 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.

Answer 2

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

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

And the js part:

<script type="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.

Answer 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.