HLS Playback Fails after Pre-Roll ads on iPhone

[utilsites]

I've implemented the Clappr-IMA-Plugin identically as shown in the sample page.

I'm using latest versions, and a real ad network with VAST for pre-roll video ads, and everything works fine on Windows (desktop) and Android (various browsers). However, on iPhone (Safari and Chrome), the pre-roll video ads play correctly, but after the ad finishes, the player displays an error:

"Error code: hls: 4"

It seems like it fails to load the livestream video after the ad. If I disable ClapprImaPlugin, the livestream works fine on iPhone.

Additional Notes:
1 - The video is a livestream.
2 - The video requires authentication cookies to be sent with every HTTP media request. I suspect that after the pre-roll ads (sometimes with skip), the plugin might not be sending the cookies, or the player is failing to resume playback. I also tried forcing playback programmatically, but it didn't work.
3 - I tested various flag configurations without success. Sometimes it seemed to work if I manually switched to fullscreen after the ad or click play again, but not consistently.

Any tips @kslimani? Anyone? Thanks.

Here's the JavaScript code I'm using:

` <script>
let player1 = null;

    function ConfigurePlayerCore(cfg) {
        var plugins = [];

        var config = {
            parentId: '#' + cfg.playerElName, 
            source: cfg.playerBaseUrl + cfg.mediaRelUrl,
            disableKeyboardShortcuts: true,
            disableVideoTagContextMenu: true,
            autoSeekFromUrl: false,
            width: '100%',
            height: '100%',
            autoPlay: false, //autoPlay: !Clappr.Browser.isMobile,
            playback: {
                playInline: true,  //true? -> Required by skippable ads on iOS(not fullscreen)?
                recycleVideo: Clappr.Browser.isMobile,
                crossOrigin: 'use-credentials', // allow sent cookies for authorization
                hlsjsConfig: {
                    xhrSetup: function (xhr, url) {
                        xhr.withCredentials = true;
                    }
                },
            },
            plugins: plugins,
            poster: cfg.playerBaseUrl + cfg.livePhotoRelUrl + '?t=' + String(new Date().getTime()),
            watermark: 'https://mydomain1.com//logo.png',
            position: 'top-left',
            watermarkLink: 'https://mydomain1.com/'
        };

        if (cfg.imaAdPlayerPluginEnabled) {
            plugins.push(ClapprImaPlugin);
            config.imaPlugin = {
                requestAdIfNoAutoplay: true,
                //disableNonLinearForIOS: true,
                resetAdOnEnded: true,
                imaAdPlayer: {
                    tag: cfg.imaAdPlayerTag,
                    vpaidMode: ClapprImaPlugin.vpaidMode.INSECURE,
                    maxDuration: 20000,
                    adsRenderingOptions: {
                        useStyledLinearAds: true,
                        useStyledNonLinearAds: true,
                        //loadVideoTimeout: 5000,
                    },
                    debug: true,
                }
            };
        }

        var player = new window.Clappr.Player(config);
        var posterPlugin = player.core.mediaControl.container.getPlugin('poster');
        player.on(Clappr.Events.PLAYER_STOP, function updatePoster() {
            posterPlugin.options.poster = cfg.playerBaseUrl + cfg.livePhotoRelUrl + '?t=' + String(new Date().getTime());
            posterPlugin.render();
        });
        return player;
    }

    function ConfigurePlayerCam1() {
        let cfgCam1 = {
            camId: '1',
            playerElName: 'playercam1',
            playerBaseUrl: 'https://mydomain1.com/',
            mediaRelUrl: 'mem/abcd.m3u8',
            livePhotoRelUrl: 'mem/abcd.jpg',
            imaAdPlayerPluginEnabled: true,
            imaAdPlayerTag: 'https://mydomain1.com/ads/vmap1.xml',
        };
        $("#divLoadingCam1").hide();
        player1 = ConfigurePlayerCore(cfgCam1);
    }

    let scriptsCount = 0;
    function scriptloaded_clappr() {
        if (++scriptsCount == 2) {
            ConfigurePlayerCam1();
        }
    }
</script>
<script src='https://cdn.jsdelivr.net/npm/@clappr/player@0.11.5/dist/clappr.min.js'
        onload='scriptloaded_clappr()'
        integrity='sha256-1vZmmm/d3tXYzlBdhc476hzEtS6EuVej+l2wLn2tH/w=' crossorigin='anonymous' defer></script>
<script src='https://cdn.jsdelivr.net/npm/clappr-ima-plugin@0.5.3/dist/clappr-ima-plugin.min.js'
        onload='scriptloaded_clappr()'
        integrity='sha256-ZxahcyFPLd9O22SGbV8AaQkt8B5QKrWFRtGaAsTQY1I=' crossorigin='anonymous' defer></script>`

[kslimani]

Hello,

i suspect this behaviour may be due to iPhone device using built-in native html5 video element for playback. (not using hls.js playback) on Safari.

Depending on device/browser, Google IMA SDK may choose to play video advert :

• on the top of current video element, using another video element (mostly on desktop)
• using current video element, replacing video source by ads then restoring previous source (some phone devices)

I think your issue may due to second use case.

Try to use debug tools to settle if advert is played using the same video element (internal in Clappr playback).

Try also to remove playInline = true as it force sometime to play advert using same video element. (just to test my theory)

This could be also an issue when clappr-ima-plugin attempt to restore previous content in video element (when using same video element).

You can also bind some events to inspect video element state.

config.imaPugin = {
    // [ ... ]
    onAdPlayerReady: function (adPlayer) {
        adPlayer.on('started', function(o) {
            // Advert started to play, here you can check which video element is used for playback
            // o.target is ad player object instance
            console.log(o.target.getDisplayContainer());
        });
    }
}

[utilsites]

Thanks for you feedback!
I made some tests in iphone safari (iOS 18.3.1).
Used the same VAST/VMAP url used in your sample page, to simplify .

1 - with Bunny video like in the sample page it works well.
2 - with livestream HLS source with auth cookie
2.1 - with playInline=true, the pre-roll video ad enters in repeat mode and the source video never appears.
2.2 - with playInline=false, the pre-roll video ad plays then stops sometimes, others repeats. Sometimes assumes the native play others not, don't understand. One time it played inline, and I pressed play again after the pre-roll and the livestream video worked well. Does not have consistent behavior.

I logged the container info like suggested, and it's the same in all cases, just change some ids, here is the log bellow.
Note, the "No valid AdMedia; setting url directly" also appear with the BUNNY video.

LOGS on iphone
_Clappr version 0.11.5
[ 2.027s] [Html5VideoDisplay] No valid AdMedia; setting url directly.
#########################
### 1 - adPlayer started, log container info - START:
// Advert started to play, here you can check which video element is used for playback. o.target is ad player object instance
## 1.1 - container.innerHTML:

<iframe src="https://imasdk.googleapis.com/js/core/bridge3.688.0_debug_en.html?gdpr=1#fid=goog_1466332836" allowfullscreen="" allow="" id="goog_1466332836" title="Advertisement" width="640" height="360" style="border: 0px; opacity: 1; margin: 0px; padding: 0px; position: relative; color-scheme: light;"></iframe><iframe title="Advertisement" style="display: none;"></iframe>

## 1.2 - container.outerHTML:

<iframe src="https://imasdk.googleapis.com/js/core/bridge3.688.0_debug_en.html?gdpr=1#fid=goog_1466332836" allowfullscreen="" allow="" id="goog_1466332836" title="Advertisement" width="640" height="360" style="border: 0px; opacity: 1; margin: 0px; padding: 0px; position: relative; color-scheme: light;"></iframe><iframe title="Advertisement" style="display: none;"></iframe>

## 1.3 - container.id:

## 1.4 - container.innerHTML:
ima-ad-container
## 1.5 - container.innerHTML:
[object DOMRect]
### 1 - adPlayer started, log container info - END!
#########################_

Here is the base source code (very similar):

`
(function () {
console.log('Clappr version ' + Clappr.version);
var TAG_VMAP_Demo = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=';
//var BUNNY = 'https://diffusepro.com/resources/sample/h264_big_buck_bunny_trailer-1080p.mp4';
var sourceUrl = 'https://mydomain.com/media/live.m3u8';

var player = new Clappr.Player({
    parentId: '.player',
    source: sourceUrl,
    disableKeyboardShortcuts: true,
    disableVideoTagContextMenu: true,
    autoSeekFromUrl: false,
    width: '100%',
    height: '100%',
    autoPlay: !Clappr.Browser.isMobile,
    playback: {
        playInline: true,
        recycleVideo: Clappr.Browser.isMobile,
        crossOrigin: 'use-credentials', // Permite o envio de cookies
        hlsjsConfig: {
           xhrSetup: function (xhr, url) {
                xhr.withCredentials = true; @* ad cookie in every request mandatory for iOS hls native play *@
            }
        },
    },
    plugins: [
        ClapprImaPlugin,
    ],
    imaPlugin: {
        requestAdIfNoAutoplay: true,
        disableNonLinearForIOS: true,
        resetAdOnEnded: true,
        imaAdPlayer: {
            tag: TAG_VMAP_Demo,
            vpaidMode: ClapprImaPlugin.vpaidMode.INSECURE,
            maxDuration: 30000,
            adsRenderingOptions: {
                useStyledLinearAds: true,
                useStyledNonLinearAds: true,
                //loadVideoTimeout: 5000,
            },
            debug: true
        },
        onAdPlayerReady: function (adPlayer) {
            adPlayer.on('started', function (o) {
                // Advert started to play, here you can check which video element is used for playback
                // o.target is ad player object instance
                console.log('#########################');
                console.log('### 1 - adPlayer started, log container info - START:');
                console.log('// Advert started to play, here you can check which video element is used for playback. o.target is ad player object instance');
                const container = o.target.getDisplayContainer();
                console.log('## 1.1 - container.innerHTML:');
                console.log(container.innerHTML); // Logs inner HTML
                console.log('## 1.2 - container.outerHTML:');
                console.log(container.outerHTML); // Logs full HTML element structure
                console.log('## 1.3 - container.id:');
                console.log(container.id); // Logs its ID (if any)
                console.log('## 1.4 - container.innerHTML:');
                console.log(container.className); // Logs class names
                console.log('## 1.5 - container.innerHTML:');
                console.log(container.getBoundingClientRect()); // Logs size and position info
                console.log('### 1 - adPlayer started, log container info - END!');
                console.log('#########################');
            });
        }
    }
});

})();`

I hope that this clarifies whats happening, do you have a solution? 😅
Best regards, thanks!

[kslimani]

Hello,

I have changed video source on demo page to hls and i can confirm there is an issue on iphone. (i asked a friend to test).

Unfortunately, i don't have an iPhone device to debug the issue at home.

Next week i will try to access to one to attempt to debug the issue.

[utilsites]

Thanks for the help.
Strange that no one noticed this before, maybe this plugin is not used a lot for livestreaming.

You may already know this, but I’m writing anyway. Look at saucelabs and browserstack, I used to test websites on iPhone and look at the browser developer tools, as now I don't have a Mac PC to connect to iphone, and I think there is no easy way to do it on Windows. But those sites without a paid plan only give you some minutes, so have to be fast testing if's that the case. :) I also paid for a month.

Waiting for you testing and possible solution or new plugin release with bug fix.
I can help testing more scenarios on iphone, tell me if you need.
Thanks.

[utilsites]

Attaching printscreen of the DOM tree on iPhone using saucelabs (I took the prinscreen but didn't past it on the post above):

[utilsites]

New iOS release:
iOS 18.3.2
This update provides important bug fixes, security updates, and addresses an issue that may prevent playback of some streaming content.
https://support.apple.com/100100

Maybe has some impact in this case? Going to test @kslimani

[utilsites]

Test done on iOS 18.3.2, same issue described above is happening.

[utilsites]

Hello,

I have changed video source on demo page to hls and i can confirm there is an issue on iphone. (i asked a friend to test).

Unfortunately, i don't have an iPhone device to debug the issue at home.

Next week i will try to access to one to attempt to debug the issue.

@kslimani Any updates on the iPhone fix?
Should I wait or look for alternatives?
I don’t have the technical knowledge to fix it myself currently.

Thanks!