Broken sequential loadVideo on fullscreen on iOS

[admg]

I created event handler on "ended" event and added code to load new video after 1sec via "loadVideo" method. It works ok when playing on page, but on iOS with fullscreen mode enabled something is broken:

1. After video ends it closes fullscreen mode
2. After 1 sec new video from url is loaded
3. When I hit play, new video starts playing (on page)
4. When I select "fullscreen" it shows different video at 0 time. And then when I press "play" it plays some different video on fullscreen (this is next recommended video from the first I loded to player)

It's broken on Safari and on Chrome. It works ok on desktop and on android chrome.

[lssamlyon]

Thanks for raising this issue, however we don't seem to have sufficient information to evaluate the problem. Do you have any example pages or code we can use to help us understand this better?

[kiyono]

Hi! I'm having the same problem.

Description

• I am using an iframe to display the vimeo URL on the page.
• For the purpose of continuous playback, the first video is played manually by the user to make it full screen.
• We monitor the playback of the first video with ended and perform videoload when the event is fired.
• This will cause the next video to play while it was previously full screen.
• Current, when videoload is done, the full screen is released and the video is waiting to be played (loading is complete).

I have confirmed that this happens in the following cases

• iOS(15+)
  • No problem on iPadOS, Android

Example code

part HTML

      <iframe
        id="vimeo-player"
        class="vimeo-player"
        :src="videoUrl"
        frameborder="0"
        allow="fullscreen; autoplay"
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
      ></iframe>

part JS

  public setEndedEvent(): void {
    this.setPlayerEvent('ended', async (v: TimeUpdationResponse) => {
      if (this.hasNextVideo) {
        await this.onPlayNext();
      } else {
        await this.setCurrentTime(0);
        await this.pause();
      }
    });


  private async onPlayNext() {
      await this.unloadVideo();
      this.videoIndex = this.videoIndex + 1;

      const id = currentVideo.continuous_movie_id!;
      const hashCode = currentVideo.continuous_movie_hash_code;
      const movieUrl = this.movieUrl(id, hashCode);

      if (hashCode) {
       	# `{ url: movieUrl }` is LoadVideoOptions 
        await this.player.loadVideo({ url: movieUrl });
      } else {
        await this.player.loadVideo(id);
      }

      await this.player.play();
  }

PS. Sorry for my poor English ;D

[rkrishnan8594]

@admg @kiyono Do you still experience this issue on iOS if you set the playsinline to true in your embed? It's false by default.