This is the 10th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

Although this article is intended to implement full screen player (video) and solve the problems encountered in full screen, if you want to implement other elements full screen, the following full screen code and solutions to some of the problems are also applicable, please refer to below.

Player full screen code

The requestFullscreen and exitFullscreen apis are used to enter the player into full screen. These apis are available on PC and Android, but not on ios. Ios is an alternative. You can only use the webkitEnterFullscreen API to enter the full screen. In addition, ios has no API to exit the full screen.

Note the following points:

  1. webkitEnterFullscreenFull screen only for ios video elements, and the full screen API for ios is onlywebkitEnterFullscreen, so the only real full-screen element that ios can implement is video (see the code below for “fake full-screen”).
  2. requestFullscreenFull screen for almost any element (not just video).
  3. requestFullscreen(Enter full screen) andexitFullscreen(Exit full screen) may have unique names in different browsers, such as:mozRequestFullScreenIt’s the Firefox API.

The following is an example of full-screen player code that is compatible with all browsers (including mobile). If you want to use full-screen for non-video elements, you can use the querySelector starting with toggleFullScreen to point to the target element and modify it a little.

<! -- It is better to have a div wrap the video tag -->
<div class="video-box">
  <video src="xxx" poster=""></video>
</div>

<script>
  // Check for full screen (invalid on IOS)
  function checkFullScreen() {
    var isFull = document.webkitIsFullScreen || document.mozFullScreen || 
      document.msFullscreenElement || document.fullscreenElement
    if (isFull == null || isFull == undefined) {
      isFull = false
    }
    return isFull
  }
  
  / / full screen
  function toggleFullScreen() {
    var videoBox = document.querySelector('.video-box')
    // Video is the video TAB in the video-player. This is used for full screen on ios
    var video = document.querySelector('.video-box video')
    var isFull = checkFullScreen()
    //W3C
    if (videoBox.requestFullscreen) {
        isFull ? document.exitFullscreen() : videoBox.requestFullscreen()
    }
    //FireFox
    else if (videoBox.mozRequestFullScreen) {
        isFull ? document.mozCancelFullScreen() : videoBox.mozRequestFullScreen()
    }
    //Chrome
    else if (videoBox.webkitRequestFullScreen) {
        isFull ? document.webkitCancelFullScreen() : videoBox.webkitRequestFullScreen()
    }
    //IE11
    else if (videoBox.msRequestFullscreen) {
        isFull ? document.msExitFullscreen() : videoBox.msRequestFullscreen()
    }
    // IOS (exception)
    else if (video.webkitEnterFullscreen) {
        video.webkitEnterFullscreen()
    }
    
    // Change the full screen zoom icon (no effect on IOS)
    if (isFull) {
    
    } else{}}</script>
Copy the code

The full-screen code is invalid

The iframe caused

If your full screen code is in the iframe page, remember to allow full screen iframe.

<iframe src="http://xxxx.com" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
Copy the code

It’s not triggered by the user

If your full screen code still doesn’t work, you may have done this: the web page opens automatically to full screen, this will be disabled by the browser.

Full screen events can only be triggered manually by the user, even if you simulate an automatic mouse click. Look at this explanation.

The ESC cannot be listened on after the PC is in full screen mode

Generally speaking, on the PC, the ESC shortcut can also be used to exit the full screen. When the element uses the requestFullscreen API to go full screen, no code is required, and the ESC key is used to exit the full screen by default, so the ESC listening is disabled.

document.onkeydown = function() {
    if (event.keyCode == 27) {
        // No effect}}Copy the code

That doesn’t seem to be a problem, because the ESC key is used to exit full screen.

But sometimes, we might have a business that exits full screen and needs to execute other code immediately.

Here, the onresize curve can be used to save the country. When the size of the window changes, check whether the window is in the full-screen state. If the window exits the full-screen state, the service code is executed.

window.onresize = function () {
    if(! checkFullScreen()) {// After the full screen exit, execute the business code}}Copy the code

How do I display a custom control bar when the player is full screen

When the video is in full screen, the control bar also needs to be in full screen. In fact, this function is very simple. First, the video label needs a parent element, video-box. All elements in the video-box will go full screen as well. The custom control bar Ctrl-box can be written inside the video-box.

<div class="video-box">
  <video src="xxx" poster=""></video>
  <! -- Custom control bar -->
  <div class="ctrl-box">.</div>
</div>
Copy the code

The mobile terminal cannot display the user-defined control bar in full screen mode

The custom control bar cannot be displayed in full screen mode on the ios

Because the full-screen on IOS can only be used to call webkitEnterFullscreen to make the video TAB full-screen (in fact, the built-in full-screen on IOS), the custom control bar cannot be displayed in full-screen.

Again, webkitEnterFullscreen is full screen for the ios video TAB, not for other elements.

We can use styles to write a “fake full screen” code that avoids using ios controls and displays custom control bars.

<script>
// For convenience, jq is used
// Check whether it is IOS
varisIOS = ! (navigator.userAgent.indexOf("Android") > -1) && (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent))

function toggleFullscreen() {
    if ($('.video-box').hasClass('fullscreen')) {
        // The dead height is set to 210, you can change it
        $('.video-box').removeClass('fullscreen').removeClass('transform').width('100%').height(210).css('margin'.'0')}else{$('.video-box').addClass('fullscreen')
        if ($(window).width() < $(window).height() && isIOS) {
          $('.video-box').width($(window).height()).height($(window).width()).css('margin'.The '-' + $(window).width()/2 + 'px 0 0 -' + $(window).height()/2 + 'px').addClass('transform')}else{$('.video-box').width($(window).width()).height($(window).height()).css('margin'.The '-' + $(window).height()/2 + 'px 0 0 -' + $(window).width()/2 + 'px')}}}// Gravity sensing, change the direction of the screen, and if the screen is full, change accordingly
window.onresize = function() {
  if($('.video-box').hasClass('fullscreen')) {if ($(window).width() < $(window).height() && isIOS) {
      $('.video-box').width($(window).height()).height($(window).width()).css('margin'.The '-' + $(window).width()/2 + 'px 0 0 -' + $(window).height()/2 + 'px').addClass('transform')}else{$('.video-box').width($(window).width()).height($(window).height()).css('margin'.The '-' + $(window).height()/2 + 'px 0 0 -' + $(window).width()/2 + 'px').removeClass('transform')
    }
  }
}
</script>

<style>
/* Screen rotation style */
.video-box.fullScreen.transform {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform-origin: 50%;
  -ms-transform-origin: 50%;
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  -o-transform-origin: 50%;
}

/* When the screen changes direction, the player control bar needs to be fixed */
.video-box.fullScreen.transform .control {
  position: fixed;
}

/* Full screen needs to change position */
.video-box.fullScreen {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
}
</style>
Copy the code

Fake Full Screen is also compatible with Android.

For a “fake full screen,” make sure to turn your phone’s gravity sensor on for better results.

The principle of “fake full screen” is simple: fix the specified element, enlarge the element to the same width and height as the window, and monitor the resize so that the gravity sensor changes accordingly.

There are some experiential issues with this approach, though. On the iPhone, the address bar will still be there. The red box is shown below:

On android, the custom control bar cannot be displayed in full screen mode

On the Android side, because it is more open, unlike the ios browser, which can only use the ios browser kernel, the Android browser can be described as a hundred flowers, with a variety of custom functions. Among them, there is a developer unfriendly situation is that some browsers (such as QQ browser, UC browser) will automatically hide our custom control bar, use the built-in default control bar (in fact, not only full screen, also non-full screen).

What I want to say is…… This is unsolvable ！！！！！！

As for why like huya live can show their own control bar, I suspect that huya live and browser may have py trade!!

As I mentioned in my previous post, “Player – Can’t Autoplay,” browser vendors have a whitelist of domain names that automatically play web sites.

Here, too, sites under whitelisted domains can display their own control bar. Do not believe, you can try to change host, will huya domain name pointing to their own website, open agent, Android phone fill in the agent, with android QQ browser to open huya domain name, You’ll find that your own web site can display your own control bar (you can test this with the Fiddler proxy).

I also specifically asked the question “How do I block the browser’s default buttons and styles when the mobile Web player is not full-screen or full-screen? .

Technically, there is no solution to this problem, so don’t bother with it, tech geeks, unless you really want to do a py deal with a browser vendor……