Latest Chrome browser could not autoplay youtube video on player

[thomasjoyce]

Hi, i notice chrome browser: Version 46.0.2490.80 (64-bit) that i have somehow got updated automatically by Google and now my player does not autoplay anymore for youtube video. Other browser like Safari and Firefox works with the same auto play code.

On the chrome browser, the code below:

player.load();
player.play();

did not get trigger automatically but other browser auto play the youtube videos. But when i manually click on the youtube video, it will play on Chrome browser.

I also notice that it will try to auto play the video on chrome but show a gray screen video on the screen instead of playing the youtube video.

Any idea why? or pointers? Thanks again for this awesome open source player :- ) I'm using mediaelement_rails VERSION = '0.8.0'

v0.8

• Updated MediaElement.js to 2.14.2

[thomasjoyce]

More investigation...

i tested starting from the latest Google Chrome:

Version 46.0.2490.80 (64-bit) - Does not auto play Version 46.0.2490.71 - Does not auto play Version 45.0.2454.101 - Does not auto play Version 45.0.2454.85 - Does not auto play

Version 43.0.2357.134 - This auto play youtube video

interesting, this chrome version works, i tried this version and the youtube video autoplays. Version 43.0.2357.134 (64-bit)

Something in chrome change from 43 major version to 45 major version.

i got the older version of chrome here: http://google-chrome.en.uptodown.com/mac/old

[fusion2004]

Can you tell me what video you are trying to play and all of the code & markup you are using to play it?

[thomasjoyce]

Hi Mark, :- )

Sure. Thanks for your help. it was working before until recently where chrome silently upgrade my browser to the latest version and i start noticing the autoplay does not work anymore. hope this info helps. :- ) i will take a look at chrome to see if they have some sort of write up on each version # that they fix on the browser...hopefully i can find some hints there as well.

HTML

<video width="240" height="150" id="aaa" preload="none" type="video/youtube" src="https://www.youtube.com/watch?v=wDuUkp7mAmI"></video>                 

Source Code:

 var aaa = $('#aaa').mediaelementplayer({
                mode: 'shim',
                flashName: 'flashmediaelement-cdn.swf',
                pluginPath: '//s3.amazonaws.com/aaa-assets/assets/mediaelement_rails/',       
                features: ['playpause', 'current', 'progress', 'volume', 'markers', 'fullscreen'],
                enableKeyboard: false,
                httpsBasicAuthSite: true,
                enablePluginDebug: false,
                showControls: true,
                alwaysShowControls: false,
                videoVolume: 'horizontal',
                hideVideoControlsOnLoad: true,
                loop: false,
                success: function (mediaElement, domObject, player) {

                            /* Not yet tested??? */
                             if ( mejs.MediaFeatures.isiOS ) {
                                     $('.mejs-layers, .mejs-controls').hide();
                             } 

                             /* set the universal element to be use everywhere for this player */
                            window.mediaElement = mediaElement;
                            window.domObject = domObject;

                            mediaElement.addEventListener('ended', function () {
                                      console.log("aaaa listening request: ENDED ");                     
                            }, false);

                             mediaElement.addEventListener('canplay', function () {
                                  console.log(" aaa video_content listening request: CANPLAY"); 
                                  global_player_id = $('#aaa').attr('mediaelement');  
                                  console.log("aaa video_content listening request, player_id:" + global_player_id); 
                                   player.load();
                                   player.play();
                                                                   player.showControls();
                                   /* Initial, set Fullscreen feature */
                                                                   mediaElement.setFullscreen(true);
                                                                   mediaElement.enterFullScreen();
                                                                   mediaElement.setMuted(true); /* Mute by default */
                                }, false);

                            mediaElement.addEventListener('fullscreenchange', function(e) {
                                  console.log("aaa video_content FULLSCREEN request:" + mediaElement.isFullScreen);
                             }  , false);                       

                   }, /* END of ...success: function (mediaElement, domObject, player) { ... */
                                   error: function () {
                            console.log('aaa video_content ERROR played: mediaelementplayer fail. :- ( ');
                                     }                                                       
     }); /* END of ... var promoVidAds = $('#aaa').mediaelementplayer({ ... */

[thomasjoyce]

adding release info on version "45.0.2454.85" where auto play started not working anymore. in the release notes, i saw these fixes notations "Cross-origin bypass in DOM" ... i wonder this may be the issue. sorry not really familiar in this area. thanks again for taking a look at this issue. :- ) http://googlechromereleases.blogspot.com/2015/09/stable-channel-update.html

[thomasjoyce]

ok after some digging found out the reason, :-( a bit annoying this is done. i believe this is a bug ...what do you think?

Apparently google chrome team decided to intelligently pause content (like Flash animations) that aren’t central to the webpage, while keeping central content (like a video) playing without interruption.

The last part is not the case. "keeping central content (like a video) playing without interruption."

Since our youtube video is run via flash, it bypass the mediaelement code and prevent it from auto playing. the "intelligently pause content (like Flash animations) youtube" causes youtube video from auto playing even though mediaelement code tells it to auto play.

http://chrome.blogspot.co.uk/2015/06/better-battery-life-for-your-laptop.html

Temporarty fix: i had to set the chrome browse setting to be Plugins > "Run All Plugin Content"

Starting from Version 45.0.2454.85, it default set all chrome browsers to be Plugins > “Detect and run important plugin content.” (recommended) which pause video from autoplaying

[thomasjoyce]

ok, i added the issue to Google Chrome team to see what they thinks as well.

Here the ticket to them: https://code.google.com/p/chromium/issues/detail?id=552041&thanks=552041&ts=1446755324

[fusion2004]

Since it sounds like the problem is chrome-specific, and specific to MediaElement.js, rather than this project (which integrates MediaElement.js into the rails asset pipeline), you may want to post this issue with them: https://github.com/johndyer/mediaelement