Make emscripten examples video playback more robust

[ofTheo]

Currently you have to allow auto-play via browser settings ( either globally or on the browser settings for your website ) to get video playback working.

However on mobile these settings don't exist ( at least on iPhone ), so that the video examples just don't load.

Ideal use case is if we can detect if auto-play is enabled and if not do something like ThreeJS which makes you click 'play' on the example before it loads see: https://threejs.org/examples/?q=video#webgl_materials_video

The play interaction is considered user input and therefore bypasses the blocking of the video.

In our case, enabling this only if video is included in a project would be ideal.

cc @Jonathhhan @themancalledjakob @artificiel

[Jonathhhan]

@ofTheo

Ideal use case is if we can detect if auto-play is enabled and if not do something like ThreeJS which makes you click 'play' on the example before it loads see: https://threejs.org/examples/?q=video#webgl_materials_video

That would be definitely the ideal case. And it looks like it is possible to detect, if autoplay is enabled: https://stackoverflow.com/questions/49939436/how-to-detect-if-chrome-safari-firefox-prevented-autoplay-for-video

Detecting if autoplay is disabled
Instead of using autoplay on your element, you can use the play() method on the video and audio element to start playing your media. The play() method returns a promise in modern browsers (all according to the spec). If the promise rejects, it can indicate that autoplay is disabled in the current browser on your site.

The main drawback is, that the (video / audio) examples would need some additional code especially for Emscripten.