Video.js enter fullscreen on play

前端 未结 4 938
星月不相逢
星月不相逢 2021-01-01 03:18

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 d

相关标签:
4条回答
  • 2021-01-01 03:55

    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;
            }
    
    0 讨论(0)
  • 2021-01-01 04:02

    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.

    0 讨论(0)
  • 2021-01-01 04:06

    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.

    0 讨论(0)
  • 2021-01-01 04:11

    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.

    0 讨论(0)
提交回复
热议问题