one three.js example of video on iPhone 6s did not work( only black panel)

Question

one three.js example of video on iPhone 6s did not work( only black panel)

https://stemkoski.github.io/Three.js/Video.html

But the example works fine on PC desktop browser. It failed in Safari & Chronme on iPhone 6s

Dubious

Answer 1

As of 2019 the solution for iOS is

1. you have to start the video in user gesture event like 'click' or 'touchstart'

   Otherwise the browser will refuse to play the video

   someElement.addEventListener('click', () => {
    videoElement.play();
   });
   

2. you have to set playsInline to true

   videoElement.playsInline = true;
   

Here's a working example as of iOS 12

http://webglsamples.org/video/video.html

Leslielesly

Answer 2

There is similar question here and the cause is same I guess.

Three.js WebGLRenderered videos don't play on android phones

Mobcap

Answer 3

I found another process playing video file was started by the HTML5 web. But I think this is not a good user experience with iPhone 5. Temporarily, the problem was solved by programming the native code of video-playing and sending the app onto the Iphone 6s in ios 9.3.

Dubious