Is there a way to create a delegated menu for embedded youtube videos (youtube autoplay chrome)

Question

I try to create a delegated menu for youtube video and video based audio files in one of my projects webpages and all works fine in FF, Safari, IE and so on, except in Chrome.

I know there are limitations for autoplay in chrome browser since Version 66. (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)

I came up with the conclusion, that this might be the issue here and verified it by playing mute, what is an exception in chromes autoplay policy.

An user initiated play works fine even in chrome. So what I want to try is a delegation of the user action (click an extern play button) to the iframes video to make it accept the play.

   var player = YT.Player( ... )
   var player_elem = $(iframe#youtube_x);
 /* ... */
    case "play":
        // why mute? 
        // => https://developers.google.com/youtube/iframe_api_reference?hl=de#Autoplay_and_scripted_playback
        // => https://stackguides.com/questions/50507985/youtube-iframe-api-auto-play-not-working-for-chrome-and-video-resolution-set-not
        player.mute();
        pauseAll(); // 4all player as p => p.pauseVideo() 
        player.playVideo();
        setTimeout(function(){ 
            player.unMute();
                setTimeout(function(){ 
                  state = player.getPlayerState();
                  switch(state){
                    case 5:     // positioning
                    case -1:    // not started
                    case 0:     // ended
                    case 2:     // paused
                        Console.log("cant play content ...");
                            // player_elem.delegat() is deprecated
                        player_elem.on( 'click', null, event.data )

                        break;
                    case 3:     // buffering
                        Notice.console.log("still buffering .. ");
                    case 1:     // played
                        break;
                  }
                }, 300);
            delayedPlayerStateChanged(player_elem.attr("id"), ctrl_bar);
        }, 100);

        delayedPlayerStateChanged(player_elem.attr("id"), ctrl_bar);
        break;

I need a snippet to delegate the the user action 'play' from my page to get accepted by the iframe as user action. Is this even possible in chrome?

I actually experimenting with this: github.com/WICG/gesture-delegation/blob/master/explainer.md. and will give an example if I got it work. — W P

W P W P · Accepted Answer · 2019-04-20T11:19:54

History

First I tried to simply add a mentioned ( gesture-delegation article @github.com )

delegatestickyuseractivation="media"

But this do not worked for me(YTs playVideo() only works after interaction direct over the YT video iframe). I also found an article regarding delegatestickyuseractivation and that it is not yet implemented properly. This article recommended to use

gesture="media"

html attribute instead.

Finally

.. he browser brought the solution by inform me(within JS Development Console) that gesture="media" is not supported in iframes and I should try to use

allow="autoplay"

And thats it, as simple as it could be.


<iframe id="youtube_{$vid.id}" 
        src="{$vid.uri}?{$vid.player_parameter}" 
        delegatestickyuseractivation="media" 
        allow="autoplay">
</iframe>

Notice

This solution only works after user interaction on the main page, embedding an media iframe like youtube video embeds. So it is no workaround against the chrome autoplay policy. It is just a method to delegate the user interaction to the iframe to make it accept YT media control commands.

Is there a way to create a delegated menu for embedded youtube videos (youtube autoplay chrome)

1 Answers