none
Fullscreen API RRS feed

  • Question

  • Hello! I have one issue with Fullscreen API.
    We should implement shortcuts in the player. Everything was implemented except fullscreen API.
    We have buttons in our player and they are working. But if we implement the same function which work by click for event which should work by keyboard keydown event it's doesn't work. If we enter in fullscreen mode by click we can leave this mode with keyboard event, but the main issue that we can't enter with keybord event in this fullscreen mode.
    I know that you have shortcut `f11`, but we need another button.
    Also I can't enter in fullscreen mode with console, but also can exit from this mode using console.
    I found a lot information about Fullscreen API in my research, but I didn't find any information about IE11 limitation for entering in fullscreen mode with keyboard.
    Could you help please with this issue?
    Wednesday, June 12, 2019 6:55 AM

Answers

  • Hi Denys_Kohut,

    I made a test again and find that all code is working except line below.

    elem.msRequestFullscreen();

    In some tests, I find that it works sometimes and it does not do anything in some other tests.

    So msRequestFullscreen() is not working accurately with keydown event. 

    It looks like some kind of bug to me.

    Thanks for informing us about the issue. Currently I did not get any work around for the issue.

    I will try to search further and if I get any information than I will try to provide you.

    Thanks for your understanding.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by Denys_Kohut Thursday, June 13, 2019 8:16 AM
    Thursday, June 13, 2019 8:05 AM
    Moderator

All replies

  • Hi Denys_Kohut,

    On which element you set the key down event? Please check and verify that event is executing properly.

    check the console for any warning or error message may help to narrow down the issue.

    Full screen api has partial support in IE 11.  So try to use the -ms prefix and again try to test the issue.

    You can also try to post a sample code example here. So that we can get the idea about what you are doing actually in your code.

    Reference:

    Full Screen API

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, June 12, 2019 8:11 AM
    Moderator
  • Thank you for the quick answer.
    I set listener to the document element:

    document.addEventListener('keydown', this.initListeners, false); private initListeners(event) {
    if (event.keyCode === 70) {
    requestFullscreen(elm);
    }
    }

    export function requestFullscreen(element: HTMLElement) {
    const elm = element;
    if (elm.requestFullscreen) {
     elm.requestFullscreen();
    } else if (elm.webkitRequestFullscreen) {
     // Safari, old chrome
     elm.webkitRequestFullscreen();
    } else if (elm.webkitEnterFullscreen) {
     // iOS
     elm.webkitEnterFullscreen();
    } else if (elm.mozRequestFullScreen) {
     // firefox
     elm.mozRequestFullScreen();
    } else if (elm.msRequestFullscreen) {
     // IE, Edge
     elm.msRequestFullscreen();
    }
    }
    


    So you can see the same as in IE documentation:

    https://msdn.microsoft.com/en-us/ie/dn254939(v=vs.94)
    And this works by click event, it's entered on Fullscreen Mode but not working but keyboard event.

    That's interesting that if we want to exit from fullscreen mode it's working as by click either by keydown.

    Also we use video.js and I saw one interesting issue, that IE11 has bug by keyboard events:

    https://github.com/videojs/video.js/issues/1478

    Is this really bug or can we create some trick to avoid this limitation?
    Thank you!






    • Edited by Denys_Kohut Thursday, June 13, 2019 8:19 AM
    Wednesday, June 12, 2019 11:04 AM
  • Hi Denys_Kohut,

    I try to test the issue with code below and looks like onkeydown event is working and IE can launch the full screen.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    
    <h2>Fullscreen with JavaScript</h2>
    <p>Click on the button to open the video in fullscreen mode.</p>
    <button onclick="openFullscreen();" onkeydown="openFullscreen();">Open Video in Fullscreen Mode</button>
    <p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
    
    <video width="100%" controls id="myvideo">
      <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/howto/rain.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    
    
    <script>
    var elem = document.getElementById("myvideo");
    function openFullscreen() {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    }
    </script>
    
    <p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.</p>
    
    </body>
    </html>
    
    

    You can just try to run the above code on your side to see the result. It can also possible that video.js affect the output.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, June 12, 2019 11:42 AM
    Moderator
  • Thank you a lot for your help!!!
    I've run your code and added some another code with separate keydown event and it isn't working.
    Could you look for this example please? May be you know how I can implement this behavior?

    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    
    <h2>Fullscreen with JavaScript</h2>
    <p>Click on the button to open the video in fullscreen mode.</p>
    <p>Pressing by key F (keyCode === 70) isn't working</p>
    
    <button onclick="openFullscreen();" onkeydown="openFullscreen();">Open Video in Fullscreen Mode</button>
    <p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
    
    <video width="100%" controls id="myvideo">
      <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/howto/rain.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    
    
    <script>
      var elem = document.getElementById("myvideo");
      function openFullscreen() {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
          elem.msRequestFullscreen();
        }
      }
    
      document.addEventListener('keydown', function(event) {
        if (event.keyCode === 70) {
          console.log(' -- not working');
          return openFullscreen()
        }
      }, false)
    </script>
    
    <p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.</p>
    
    </body>
    </html>

    Thank you!!!
    Wednesday, June 12, 2019 12:18 PM
  • Hi Denys_Kohut,

    I made a test again and find that all code is working except line below.

    elem.msRequestFullscreen();

    In some tests, I find that it works sometimes and it does not do anything in some other tests.

    So msRequestFullscreen() is not working accurately with keydown event. 

    It looks like some kind of bug to me.

    Thanks for informing us about the issue. Currently I did not get any work around for the issue.

    I will try to search further and if I get any information than I will try to provide you.

    Thanks for your understanding.

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by Denys_Kohut Thursday, June 13, 2019 8:16 AM
    Thursday, June 13, 2019 8:05 AM
    Moderator