Picture of Russell Rivera
Auto-play Media
by Russell Rivera - Thursday, 5 December 2019, 2:21 PM

Hi just want to ask how to auto play an mp3 file using media plugin. So when I click on the page I don't need it to click the play button thanks.



Russell Rivera

Picture of Ailiniyazi Maimaiti
Re: Auto-play Media
by Ailiniyazi Maimaiti - Monday, 9 December 2019, 8:59 AM

Hi Russell,

I was working on a Project and there were some contents, which are build by Media Plugin, need to be autoplayed. Since there was no options for that, then I tried to get it done by changing source code of Media Plugin. After several times of try, I understood why there are no options for autoplay, because audio objects will be interrupted by the Autoplay Policy changes from Google Chrome, there is discription of this changes:


And, if you need only one media component in one page, you can try to edit the plugin's code. Open media.hbs file, replace the code at line 12 with this:

 <audio  autoplay src="{{_media.mp3}}" type="audio/mp3" style="width: 100%; height: 100%;"/>

I hope this helps. 

Picture of Shaneshwar Bhagat
Re: Auto-play Media
by Shaneshwar Bhagat - Thursday, 9 January 2020, 6:04 AM

Hi Russell,

Just for extra info on this forum. Yes if you are using adapt-contrib-media then you can either change by

1. Autoplay in media.hbs

 <audio  autoplay src="{{_media.mp3}}" type="audio/mp3" style="width: 100%; height: 100%;"/> 

and use 

"_media": {
  } in component.json. Do 'Display:none' to all other layers.

 2. OR you can also add Autoplay to video tag in media.hbs and use below mentioned player options,

 "_playerOptions": {
        "loop": true,
        "clickToPlayPause": true
Their are many other options available.
If you need only audio then keep audio controls to 'display: block' and rest all to 'display:none'.
Alternatively if you are specific to audio only then you can use 'adapt-audio' plugin made by Kineo and change their .HBS file with 'autoplay' property their also.