One example with three video examples on iPhone 6s didn't work (black panel only)

one example with three video examples on iPhone 6 didn't work (black panel only)

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

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

+1


source to share


3 answers


So it turned into a big fiasco :(

I originally thought the problem was that the video (and audio) is not allowed to autoplay on mobile, which is correct. BUT....

It turns out it is no longer possible to play videos in an iOS item (or at least iPhone, I haven't tested iPad). The video only plays full screen, which means you cannot use it as a texture source.

I don't know where Apple documented this, but apparently they disallowed video playing in the background at some point, which breaks all WebGL and Canvas demos that used video as source

There is a workaround according to this post .

A workaround is to also make an audio tag using the same file as the video. Play the audio tag from the moment you touched it, but DO NOT play the video. Then, each frame, set the video currentTime

in accordance with the audio currentTime

.

So from a POV video that he never plays, but the current Safari infrastructure allows this to work.



Here is an example working with iOS 9.3

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

I suspect Apple will close this hole in the near future as it clearly works around what they were trying to ban in the first place. I'm sure they have good intentions in trying to stop semi-automatic ads on pages when people click on things or something.

On the other hand, I would like them to just vote for clicks. In other words, if people find this kind of thing annoying, they will stop visiting sites that do it. This way, developers who want to create cool HTML5 stuff will still have access to the technology.

Or maybe there were a lot of video sites where the controls were too small and they wanted to make this work on phones. If it would be nice in this case, if there was some attribute, we could set that it says "hey, this video is not to display it for processing"

I filed a bug at https://bugs.webkit.org/show_bug.cgi?id=160685 . Please report your concerns / percentages.

+2


source


There is a similar question here and the reason is the same as me.



Three.js WebGLRenderered videos do not play on Android phones.

0


source


I found that another file playing the video was launched by an HTML5 website. But I think this is a bad experience with iPhone 5. Temporarily the problem was solved by programming my own video playback code and sending the app to Iphone 6s in ios 9.3.

0


source







All Articles