Not working on iOS8

[Alienturnedhuman]

There is a problem with the player on iOS8 Beta 2 - which does support WebGL.

I have tested it on two devices, an original iPad 2 and a current generation iPod Touch. Both report the same error.

iPad 2

iPod Touch (5th Generation)

The problem relates to "target-densitydpi" being unrecognized causing the script to crash.

Further Notes The WebGL test at webgl.org passes on iOS8 on both devices.

Both devices use the aging A5 chip. It's possible that the script may work on newer Apple chipsets, however given that both devices are going to be supported for iOS8 I doubt this is the case and the problem is a browser/operating system compatibility issue.

The eleVR player works fine on Safari 8.0 on OSX Yosemite.

[hawksley]

hmm. Ok. Looking into it more, it looks like target-densitydpi is being deprecated by webkit. Removing it has no affect on my devices, so I am just removing that, hopefully that will fix it on iOS8. I will update when the fix is pushed to master.

[Alienturnedhuman]

Let me know when you've got it live and I'll try again on my iOS8 devices.

[hawksley]

It is live now. :)

[Alienturnedhuman]

Ok, so loading the new code displays no errors, but the initial screen of:

"Loading Video... Try WASD + Q/E" x 2 is the only thing that displays. The play buttons never appear.

That's all that happens.

So, to try and make something happen, I went into the DOM inspector and set one of the play buttons to display block and pressed it, just in case that wasn't being triggered.

What happened from a user point of view is that a blank video with no sound plays in the browser video player.

What happens behind the scenes, is the moment the button is pressed, the following errors appear in the console:

Now, I don't know if these errors are a result of me hacking the DOM and firing events before they should be fired, or if they are related to the underlying problem of why they play buttons don't appear in the first place, but hopefully it can help you figure things out.

But, to make absolutely clear - no script errors occur at all, the console is completely clear, until I hit the play button that I artificially manipulated.

[amluto]

Can you try using the little folder icon in the bottom-right-hand corner to open a "file"? I'm curious whether that does better.

This sounds like Safari is getting confused about the origin of the video. I don't know whether this is related to your fiddling with the debugger.

[hawksley]

hmm. Ok. it looks like there is an issue with using video as a texture with iOS webgl (see: http://krpano.com/forum/wbb/index.php?page=Thread&postID=54072#post54072 - "Trying to use a HTML5 video as WebGL texture throws a security error")

[hawksley]

See also: https://bugs.webkit.org/show_bug.cgi?id=133511

[hawksley]

It looks like that bug was marked "fixed" ~6/23, so it is likely not available yet (?). It is probably worth holding off on debugging this issue further until the fix is available, since the issue we are seeing matches closely with the stated bug.

[Alienturnedhuman]

In response to amluto, although this is worth noting as well, I can't get the bar at the bottom to appear at all in iOS. It's possible that the Control Center is interfering with this, as occasionally that did pop up when I tried to make the pink bar appear. So it's possible that the hit box is overlapping with the hitbox iOS uses to bring up the Control Centre from the bottom of the screen, although I couldn't get it come up even when the bottom tool bar was there as well.

Andrea: I'll see if I can find out any news on that bug being fixed or not on the iOS8 developers website, although I suspect those outside of One Infinite Loop are unlikely to know until Beta 3 gets released.

[Alienturnedhuman]

I have downloaded iOS 8 Beta 3 - which I was assured by someone who should know that the reported bug with webkit was patched in it - but the player still does not work. The following error occurs:

[Alienturnedhuman]

Let me know if there is anything you need me to run in the console to give you further information.

[Alienturnedhuman]

Note, the "stack:" property which extends off of the screen in it entirety is:

stack: "load@http://player.elevr.com/lib/vr.js:228:22↵load@http://player.elevr.com/lib/vr.js:604:19↵loadVRJS@http://player.elevr.com/js/elevr-player.js:194:10↵runEleVRPlayer@http://player.elevr.com/js/elevr-player.js:75:13↵global code@http://player.elevr.com/:156:29"

[hawksley]

Yeah, that error is, unfortunately, not surprising and probably shouldn't be breaking the page (it will show up everywhere that doesn't have the vr.js plugin, and is only a problem if you want to use the Oculus). The issue with iOS8 must be separate. I am looking into getting an ipad to test on, this back and forth thing is difficult for both of us.

[Alienturnedhuman]

Ok, well let me know if there is anything I can do in the meantime. Obviously the timezones and ocean make collaborating harder but if it helps I can probably arrange to be online at a time convenient to you over the weekend and relay debug information to you in real time.

I wouldn't upgrade any of your personal devices to iOS8 - it's still very buggy and it's a good job my iPad has long since been retired as a testing device.

[hawksley]

Just a quick update. Now that iOS8 is officially out, I tested it on the current working version. It works better than described here, but has the problem that when the video plays it always shows up on top. When paused, it does seem to be using the video frame as a texture and you can look around the scene.

[Alienturnedhuman]

I don't know if it's related, but iOS doesn't do 'normal' behaviour when it comes to HTML videos in the web browser. For example there is no 'autoplay' option. It's quite probable (and sounds like) that instead of following standards that Apple have made the HTML 5 play in the Apple video player, either full screen or within a section of the viewport that is dedicated to it.

Apple does all sorts of strange stuff and abandons standards with Safari on iOS to make it run faster and use less power, which is ok for 99% of the stuff on the Internet but when you're trying to do more creative stuff with it it's no good. None of the HTML5 video transition stuff on their own website works on iOS.

I think that Opera on Android (or one of the Android browsers) does something similar if memory serves.

[hawksley]

Yes. I think that is precisely the issue. I experimented with adding "webkit-playsinline" to the video, but it doesn't seem to care. =/

I think you are correct that Opera on Android does the same thing.

[Alienturnedhuman]

Of course, iOS 8 does allow for extensions, so it may be possible to make an eleVR app that has an extension to run in Safari for eleVR videos. That's obviously not the ideal solution, as it kind of goes against the idea of it running natively in browsers, and requires a dedicated app (so lots more work!), however it should run far more efficiently as it would be code properly compiled rather than the on the fly compiled javascript that browsers run.

However, I don't see Apple changing how their browser handles video, certainly not before iOS9, and iOS devices do make up a sizeable chunk of mobile users, particularly when it comes to tablets meaning if you want to cater for these users an eleVR app is probably the only way to go :(

The only possible (and very hacky) solution I can think of, and due to my ignorance of webGL coupled with the fact I've not tried using video in this way before means there may be reasons why this wouldn't work, but what would happen if you positioned the HTML5 video outside of the viewport of the browser (say -10000px,-10000px) That way, when Apple's video player takes over, it's not drawing it on the actual screen so won't get in the way of your canvas element.

(edit, of course, I'm using that your player works by converting the frames for the video into a texture for use on your spherical render rather than distorting them, because this obviously wouldn't be a solution if it's doing the latter)

[hawksley]

Interesting discovery. I got an email from someone who is trying to make the player work for her stuff, and she noticed that the player does work in the "Frameless" browser for iOS. So you can use the player pretty easily if you just open it in that app.

[Alienturnedhuman]

Interesting, is she using iOS9 or 8 as I suspect Apple will have made significant updates to Safari as they do with each iOS release.

Given that all web browsers on iOS are Safari, might it also work as a full screen web app pinned to the homescreen?

[hawksley]

I'm not sure what she is using. Testing it on my own phone does work with the Frameless app. It looks my iOS version is 8.4

The answer to your second question appears to be yes. Added some code to let you pin as a full screen web app. Not sure why that wasn't already there - could have sworn I did that before, but evidently not/apple changed it's mind which meta tags it liked/???

[Alienturnedhuman]

Apple uses it's own -apple- prefix on mobile web apps rather than the generic, non prefixed ones for Android. Which is always irritating.

Maybe you had the standard ones in the code, but not the -apple- ones?

[hawksley]

Yes. I believe that was the case.

On Mon, Aug 17, 2015 at 4:17 PM, Ben Dickson notifications@github.com wrote:

Apple uses it's own -apple- prefix on mobile web apps rather than the generic, non prefixed ones for Android. Which is always irritating.

Maybe you had the standard ones in the code, but not the -apple- ones?

— Reply to this email directly or view it on GitHub https://github.com/hawksley/eleVR-Web-Player/issues/9#issuecomment-131989911 .

[Alienturnedhuman]

I just loaded this up on my iPad 2 running iOS 8.4 and the player note works fine in regular Safari, both in browser mode and pinned as a web app.

[Alienturnedhuman]

Oops, accidentally tapped the close issue button on my phone while scrolling.

[hawksley]

That's pretty exciting about the iPad. It means that this issue is less ubiquitous than I had realized. In the meantime, I'm enjoying finally being able to use the player (in full screen mode) on my phone for the first time since it was written. =D

[Alienturnedhuman]

If it works on an iPad 2 - which has an A5 SoC, then I would have thought it should work on all iOS devices that have the latest version of iOS. A5 is the weakest chip still being developed for, so it would be strange that newer ones had problems with it.

If it's not, that would be strange, but then there are lots of quirks with how Apple gets stuff done on mobile Safari, particularly with less conventional javascript stuff. It's possible that Apple lets iPad iOS devices do things differently to iPhone iOS devices and that's somehow affecting the player in non full screen mode on an iPhone? However, I would be surprised if this was not resolved for iOS 9, if you know someone on the public beta maybe they can test it out.

[tommybananas]

Has anyone made any progress on the reason this works on iPad but not iPhone?

[hawksley]

This is solidly something on apple's end, and there is nothing that we can do to fix it. As best as we can tell, they are simply allowing ipads to do things that iphones can't. Perhaps because ipads have bigger screens.

It will work on iphone on full screen. On your iphone if you open the player in safari, then "add to home screen" the player and open it from your home screen, then it will work.

[tommybananas]

Hm that is interesting. I noticed flylikerufus.com is using WebGL but it works great on all browsers, any idea what the difference could be?

On Mon, Oct 5, 2015 at 5:44 PM, Andrea notifications@github.com wrote:

This is solidly something on apple's end, and there is nothing that we can do to fix it. As best as we can tell, they are simply allowing ipads to do things that iphones can't. Perhaps because ipads have bigger screens.

It will work on iphone on full screen. On your iphone if you open the player in safari, then "add to home screen" the player and open it from your home screen, then it will work.

— Reply to this email directly or view it on GitHub https://github.com/hawksley/eleVR-Web-Player/issues/9#issuecomment-145690229 .

[tommybananas]

Actually now that I look at it, it seems to be using a youtube widget. I'm curious as to how youtube might get around this limitation.

On Mon, Oct 5, 2015 at 5:57 PM, Tom Juszczyk snowman4415@gmail.com wrote:

Hm that is interesting. I noticed flylikerufus.com is using WebGL but it works great on all browsers, any idea what the difference could be?

On Mon, Oct 5, 2015 at 5:44 PM, Andrea notifications@github.com wrote:

This is solidly something on apple's end, and there is nothing that we can do to fix it. As best as we can tell, they are simply allowing ipads to do things that iphones can't. Perhaps because ipads have bigger screens.

It will work on iphone on full screen. On your iphone if you open the player in safari, then "add to home screen" the player and open it from your home screen, then it will work.

— Reply to this email directly or view it on GitHub https://github.com/hawksley/eleVR-Web-Player/issues/9#issuecomment-145690229 .

[Sneagan]

@tommybananas There are 2 ways around the restriction on iOS that I've seen and I suspect that http://flylikerufus.com is using one of them:

1. Convert the video to a series of frames and run through them quickly
2. Run a JS decoder on a worker thread and apply video texture to the environment (I've done this using ogv.js)

Both have serious drawbacks. This is a huge problem for me and I'm always looking for a better solution so please share if you find one. I keep hearing about the saving to home screen thing so that's next on my list to try when I have a day to dedicate to my VR player.

[Sneagan]

Apple's decision, if I recall, was that they didn't want videos to be able to play without the user being completely are on the iPhone because of data rates when the iPhone was released. Regardless, I think this functionality is unacceptable on a modern mobile OS. I think the Chrome app on iPhone could technically change this behavior. I'm not sure why they don't.

[danieltigse]

What do you think about this solution? https://github.com/Stanko/html-canvas-video-player is using the same technology that did mention @Sneagan ?

[Sneagan]

@danieltigse This method was one of the first things I tried and it didn't use to support audio. iOS must have changed something? I'm going to give it a go on my project because it's a much lighter solution even with the weird way it's supporting audio. Thanks for sharing!

[yoanntel]

Hi,

I have same issue..... play pause and every controls not working IOS 9.3.1with safari. when i clicked on play button the video launched on native Safari player without 360. I tried also fullscreen ... same issue the video back on elevr player but paused. I can't play it I found http://krpano.com/video/ who play video inline and it's working ....... I don't know how to apply that hack on elevr player like : http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone if someone can help me ........

[danieltigse]

Are you sure is it working krpano on iPhone? Can you give me a link of an example that runs on iPhone?

[yyakult]

@danieltigse I've tried this website on my iphone 6 plus using both Safari and Chrome. http://krpano.com/krpanocloud/webvr/?v=119pr4 Sadly, it is not working. BTW, I successfully watch panoramic videos using "add to home screen" method. What is the difference between using a browser (e.g. Safari or Chrome) to access eleVR and "add to home screen"?

[danieltigse]

Hey! Navigating in the repos of github I found this: https://github.com/digitarhythm/VR360Contents That actually works on iPhone. The problem is that it doesn't have controls (play, pause, drag with mouse, etc). You have to test it in your mobile phone.

[parruc]

Also this one appears to work on ios via web browser: https://www.vroptimal.com/

Here you can see it in action: http://youareheremilano.it/test-vr-optimal/

Dont know how they are doing it but it works.

[lcb931023]

Testing the demo http://player.elevr.com/ on iOS 11 and it works. Looks like they patched whatever's causing trouble in the new OS.