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 fai

Solution 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

Solution 2:

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

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

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