Preroll and main video play simultaneously on Android device, when main video is of type m3u8

[tbourigault]

When the video is started as soon as possible on an Android device and the main video is of type m3u8, the preroll and main video will start playing both at the same time, instead of playing the preroll first and then the main video. The preroll only is visible but we can hear the audio of the main video in the background.

I have made a copy of the simple example changing only the main video from a mp4 to a m3u8

original (mp4 no bug) https://googleads.github.io/videojs-ima/examples/simple/

modified version (m3u8 bug) https://tbourigault.github.io/IMA-SDK-Plugin-VideoJS-Simple-M3U8.html

Steps to reproduce:

• Open https://tbourigault.github.io/IMA-SDK-Plugin-VideoJS-Simple-M3U8.html on an Android device.
• Click on the play button of the video as soon as possible

Expected behavior: The preroll ad should play first, followed by the main video.

Actual behavior: Both the preroll ad and main video start playing at the same time. The preroll only is visible but we can hear the audio of the main video in the background.

Environment details: Bug was reproduced on multiple android devices, different m3u8 files and versions of videoJS 7 & 8

one example: Operating system: Android 6.0.1 Browser: Google Chrome (Version 106.0.5249) Video player: video.js (Version 7.18.1) with the videojs-ima plugin (Version 2.0)

[Kiro705]

Hello @tbourigault

Android 6.0.1 is marked as no longer maintained. If you are able to develop a fix using using your device, I can take a look at the pull-request. Otherwise, the plugin may not be able to support that version of Android.

I tested the sample you shared on the following device and saw playback happen as expected.

• Pixel 6
• Android version 13

Thank you, Jackson IMA SDK team

[tbourigault]

Hello @Kiro705

I was able to reproduce it on more recent device also 2 person on my team were also able to reproduce the bug on:

• Phone Samsung s22, Android 13
• Phone OnePlus 6T, Android 11.1.2.2
• Tablet Samsung Tab A7, Android 12

Thank you

[toperharley]

I have the same issue, really weird to hear the audio of the 2 videos at the same time.

@Kiro705 Any idea about this bug? must be a timing problem?

The important point is to click on the player as soon as the video icon appears, knowing that I can reproduce almost every time. Does not seem to happen when we wait a few seconds or more.

My phone is a Samsung Galaxy A51, Android 13.

[floverdevel]

Hi 👋🏻☺️

On my device: Android 11; ONEPLUS A6013 Build/RKQ1.201217.002

I was able to reproduce the bug using Chrome. Chrome 114.0.5735.60

I was able to reproduce the bug using Edge. Edge 113.0.1774.63

Both audios can be heard simultaneously with this URL: https://tbourigault.github.io/IMA-SDK-Plugin-VideoJS-Simple-M3U8.html

I was unable to reproduce the bug with Firefox. 113.2.0 (Build #2015952075), 88ca8c80c8+ GV: 113.0.2-20230522134052 AS: 97.4.1

[Kiro705]

Hello all,

I was looking into this issue more, and have been able to reproduce it reliably, when making sure to play the video as soon as possible. Unfortunately, I have not been able to identify a fix for the issue, but will plan to take another look soon. Please let me know if any changes on your end seem to resolve this issue.

Thank you, Jackson IMA SDK team

[arifadil739]

@floverdevel how are you being able to play mid roll and post roll ads. as i am only being able to play pre-roll ads. can you please share the code. @Kiro705

[floverdevel]

@floverdevel how are you being able to play mid roll and post roll ads. as i am only being able to play pre-roll ads. can you please share the code. @Kiro705

I never tried yet to play mid-roll or post-roll ads.

[Jerome-lara]

Your demo does not work properly on the iPhone user agent, After the pre-roll is played, the video prompts error code 4 The media could not be loaded, either because the server or network failed or because the format is not supported

[davlasq]

Are there any plans of fixing it or workarounds? Maybe downgrade to some particular version?

[davlasq]

Here is my workaround, it doesn't solve the root issue but masks it for users:

let tempVolume;

player.ima.addEventListener(google.ima.AdEvent.Type.STARTED, () => {
  const adVideoEl = player.el().querySelector(".ima-ad-container video[src]");
  tempVolume = player.volume();
  player.volume(0);
  adVideoEl.volume = tempVolume;
});

player.ima.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
    player.currentTime(0);
    player.volume(tempVolume);
    player.src(player.src());
    player.play();
  }
);

So basically I mute video on ad start, then unmute and reload on ad end.