Adapt Learning Community: Auto-play Media

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.

Regards,

Russell Rivera

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:

https://developers.google.com/web/updates/2017/09/autoplay-policy-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.

Show parent | Reply

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": {

"mp3": "course/en/video/SampleAudio.mp3"

} 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.

Show parent | Reply