Stay in fullscreen video mode while autoadvancing

Development
1

When a user completes a video the auto-advance feature makes it possible for them to automatically proceed to the next video, but they are kicked out of fullscreen mode due to these limitations. how do netflix, hulu, masterclass, youtube, etc. bypass this constraint? Has anyone determined a way to stay in fullscreen mode as a user progresses from one video to the next?

1 Like
2

I don’t know about auto-advance feature, but I speculate what is happening.
Auto-advance feature may be reload a new page, so JS will be reloaded thus all user events like fullscreen mode will be forgetten… While on other hand streaming service, might not necessary reload the page, it might just do client-side rendering like change the source url of a video.

Below is an example of what I mean by client-side change video src url

  • I added an event listener to video ended event.
  • In that event, I chaned the src of the video (in your case it would be video of next unit?)
  • I then triggerd video.load() followed by video.play()

Here an example of the event listener, it should load the next sample video even if you are in full screenmode.

const video = document.querySelector('video'); // it would load the first video element.

video.addEventListener('ended', (event) => {
       video.src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
       video.load();
       video.play();
});
3 Likes
3

Thank you @ghassan for this suggestion! We will research how to identify the next video src (which is currently handled by the auto-advance feature) to experiment with this approach.