how to open html 5 video fullscreen if it was fullscreen before

Question

I'm watching a series of videos on a website organised in a playlist. Each video is about 2 minutes long.

The website uses HTML 5 video player and it supports auto-play. That is each time a video ends, the next video is loaded and automatically played, which is great.

However, with Fullscreen, even if I fullscreened a video previously, when the next video loads in the playlist, the screen goes back to normal, and I have to click the fullscreen button again....

I've tried writing a simple javascript extension with Tampermonkey to load the video fullscreen automatically.

$(document).ready(function() {
  function makefull() {
    var vid = $('video')[0]
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }

    //var vid = $('button.vjs-fullscreen-control').click();

  }

  makefull()

But I'm getting this error:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

It's extremely annoying to have to manually click fullscreen after each 2 min video. Is there a way I can achieve this in my own browser? I'm using Chrome.

What is the expected result of using setTimeout? Programmatically executing .click() is not trusted, unless triggered within an event handler dispatched by user action within a narrow time frame, see Trigger click on input=file on asynchronous ajax done() — guest271314
@guest271314 I just used setTimeout in order to wait for the video tag to appear on the page. Yes, so is there a workaround? I don't want to have to keep clicking all the time. — siamii
Why was setTimeout() removed from the question if that is the actual code used? What do you mean by "appear on the page"? Can you create a stacksnippets or plnkr plnkr.co to demonstrate the issue with the code that you have tried? — guest271314
@guest271314 setTimeout is completely irrelevant here. As I said, it was just a way to ensure the video element was present on the page. The question is about how to make the video open full screen automatically. — siamii

guest271314 guest271314 · Accepted Answer · 2019-02-17T21:38:18

If you can get the list of URL's then you can create your own playlist. The code cannot be accurately tested within a cross-origin <iframe>, for example at plnkr.co. The code can be tested at console at this very document. To test the code, you can use the variable urls at MediaFragmentRecorder and substitute "pause" event for "ended" event at .addEventListener().

If you have no control over the HTML or JavaScript used at the site not sure how to provide any code that will be able to solve the inquiry.

    const video = document.createElement("video");
    video.controls = true;
    video.autoplay = true;
    const urls = [
      {
        src: "/path/to/video/"
      }, {
        src: "/path/to/video/"
      }
    ];

    (async() => {

      try {
        video.requestFullscreen = video.requestFullscreen 
                            || video.mozRequestFullscreen 
                            || video.webkitRequestFullscreen;
        let fullScreen = await video.requestFullscreen().catch(e => {throw e});
        console.log(fullScreen);
      } catch (e) {
          console.error(e.message)
      }

      for (const {src} of urls) {                             
        await new Promise(resolve => {
          video.addEventListener("canplay", e => {
            video.load();
            video.play();
          }, {
            once: true
          });

          video.addEventListener("ended", resolve, {
            once: true
          });
          video.src = src;
        });

      }
    })();

how to open html 5 video fullscreen if it was fullscreen before

1 Answers