autoPlay for pgSoundLoader or htmlVideoLoader

[John Robin Dove]

Hi again,
I have recently acquired a Samsung tablet that uses Android. With a lot of help from Powerpac, I made a Christmas / NewYear's card as I do every year https://www.mediacours.com/xmas_2017 Happy New Year by the way! I added some music (including pretty bad violin playing by me) and used psSoundLoader with the autoPlay property set to true. On the tablet this worked fine in Firefox but not in Chrome. I did some seaching on the internet and if I have understood correctly, the version of Chrome used by Android disables autoPlay for html5 audio. I thought I'd fixed it using htmlVideoLoader and onFirstIdle to start the music but either I confused the browsers or it was a lucky fluke because I can no longer reproduce this fix. I'm a little worried for my project because the problem seems to be to do with the Chrome flag requires user-gesture but I'll have to make further tests to see if there are any serious issues or not.

John

[Clifton]

You may still be able to fool Chrome into allowing autoplay, but here is what I would suggest, (though not tested).

1. On load page use a media delay (standard ToolBook action) to delay loading the audio file, but do not allow the pgSoundLoader() function to autoplay the file.
2. Use pgTBObjSet() to send a clickOnly event to a hidden object which responds by executing pgSoundControl() to actually play the loaded sound file. Chrome should (or maybe will) treat this as a user action to play audio.
3. You can probably put all these actions on a single object using the on load page and on click events.

Loading video this way may or may not behave well with this approach. Prevously, I've noticed video seems to autoplay fine on Android as long as a delay is factored in. In other words, do not try and immediately load the video.

NOTE: (Just a thought.) Some of these constraints at loading media may be a factor only when the device detects a less than decent bandwidth. It is as though the device is programmed to disallow some features when it knows the bandwidth will not allow quality playback anyway.

[John Robin Dove]

Hi Clifton,

Thanks for your suggestions. So far I haven't been able to get this to work. My internet speed is around 20 mbps.

John

[GradyLi]

Hi Clifton, is there a way to tell for sure when the device is disallowing features because of insufficient bandwidth? Is it displayed somewhere?

[Clifton]

I'm not sure how this can be done. You can install a bandwidth monitor and many devices have graphs which show the data that is passing through the device. However, at what point are features disabled for the user? I'm not sure. Devices that restrict media, from what I understand, generally restrict media access without permission out of the box and it has nothing to do with available bandwidth.

The best way to keep an application fluid is to make sure your media files are as small in file size as possible. This is pretty easy with mp3 files. With video mp4's you should query the screen size of the device and select the video size and resolution based on the client screen.

To get the device screen size, run this JavaScript snippet:

return screen.availWidth + " by " + screen.availHeight;

The above code may result in a value of 1920 x 1050 (1080 minus the taskbar height of 30 px) for a high definition device.

Hope this helps a little!
 

[John Robin Dove]

I'm back on this subject again. There's no problem with Chrome on a PC but Chrome on Android does not allow unsollicited playback the first time a program attempts it. However it does if the user has previously tapped on the same button. This seems complicated. If you have an Android device handy perhaps you could try it. Using a 'canplay' event listener and pgTBObjSet, I enable the 'play' button as soon as a recording has been made and is ready to play. I also send a pgTBObjSet click to the 'play' button. The first time it's used after the page has loaded, it fails but once the user has clicked or tapped it, thereafter the click sent by the program is accepted! Could you confirm that this is the case, please? If it is, it's important for my program which frequently uses non-user-initiated playback. I think I could ask the user to 'prepare' a button in this way and thereafter use it programmatically.

The problem does not exist in Firefox for Android. I don't know about IOS yet but I'm hoping it that at worst it'll be the same as Android. My test app. is here:https://www.mediacours.com/recorder Thanks.

[Clifton]

Chrome has adopted new playback standards to supposedly give users a "better web experience." However, it is causing all sorts of developer headaches.
Take a look at this article and you will get an overview of their policy:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe

It looks like there may be some workarounds that I am exploring, but Chrome is going to continue to evolve standards that affect developers.

It seems as though Chrome has established a MEI (Media Engagement Index) which determines whether a user allow media to play on their device. That is why click once on a button to play media will thereafter allow autoplay on successive media on the same device. Even between sessions this eventually works.

I'm looking at setting the iframe properties and temporarily muting audio on video files to get around Chrome's behavior, but I'm not sure that will work in the long run.

Ideas are welcome!!
 

[John Robin Dove]

OK. Thanks. My (clunky) idea at the moment is to invite the user to click on a button which sends play() to a hidden HTML5 audio element which maybe plays a recorded explanation. Thereafter the same element is used for all other necessary audio playback. I think this would work but I haven't tested it properly yet.

[Clifton]

You may have touble with use a "hidden" element as Google Chrome is disallowing autoPlay on hidden elements. But you can try setting the opacity of a non-hidden element to 1 and this may have more success.

Either way let me know as some of this stuff can be automated by the PowerPac once we find methods that consistently work.
 

[Clifton]

You might try the latest PowerPac release (v14.054.0) as it implements some of the policies that may help with autoplay on media files.