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

问题

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

回答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

回答2:

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

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

回答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.

来源：https://stackoverflow.com/questions/38823292/one-three-js-example-of-video-on-iphone-6s-did-not-work-only-black-panel