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()](https://stackoverflow.com/questions/29728705/trigger-click-on-input-file-on-asynchronous-ajax-done) — guest271314, Feb 17 '19 at 20:59
@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, Feb 17 '19 at 21:08
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 https://plnkr.co to demonstrate the issue with the code that you have tried? — guest271314, Feb 17 '19 at 21:10
@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, Feb 17 '19 at 21:22

score 0 · Answer 1 · answered Feb 17 '19 at 21:38

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;
        });

      }
    })();

@siamii See also [How to use Blob URL, MediaSource or other methods to play concatenated Blobs of media fragments?](https://stackoverflow.com/questions/45217962/how-to-use-blob-url-mediasource-or-other-methods-to-play-concatenated-blobs-of) — guest271314, Feb 17 '19 at 22:09
sounds reasonable. I think the best option is to download all the videos and just play them fullscreen offline. I have control with Tampermonkey and the site in question is https://www.coursera.org . So what this code does is create a new video player with playlist in fullscreen and play all the videos in the `urls` list? — siamii, Feb 19 '19 at 20:27
@siamii _"So what this code does is create a new video player with playlist in fullscreen and play all the videos in the urls list? "_ Yes. There is no loop. Once the list is completely that is the completion of the program. A loop can also be included in the program, if necessary. — guest271314, Feb 19 '19 at 21:01

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

1 Answers1