5

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.

2
  • Do you know which version of video.js you're using? Can you share a link to working code? Commented Jun 17, 2013 at 13:29
  • Yes, it's version 4.0.4. I can't share any information about the site, since it is in development and all ... sorry but it's confidential. Commented Jun 18, 2013 at 5:54

4 Answers 4

10

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.

2
  • Thank you very much. I will look into this. Need to test it out. Commented Jun 19, 2013 at 8:20
  • 1
    Hello again. Your suggestions have been very helpful. After some time spent "playing" around with video.js, i decided to change it with jPlayer. Lost my headache eversince. The biggest problem is, like you said, the obfuscation of it's methods. Thank you again for your help. Commented Jul 3, 2013 at 8:58
4

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.

1
  • For some reason fullscreen works but id does not start playing in my case. I need to push play again when player in full screen. Can you help? Commented Mar 19, 2022 at 12:27
1

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.

1
  • 1
    Double click on player also brings fullscreen. Using this solution it will not trigger.
    – Avatar
    Commented Mar 11, 2019 at 9:53
0

in video.js file go to this lines

BigPlayButton.prototype.handleClick = function handleClick(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 mouse
        if (this.mouseused_ && event.clientX && event.clientY) {
            silencePromise(playPromise);
            return;
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.