encode city.mp4 to work on iOS, document iOS video encoding restrictions

[fuleinist]

a-videosphere is not working in mobile safari on iOS device.

A-Frame Version: 0.3.0
Platform/Device: iPhone 6 Safari iOS ver 9.3.4

Example page shows a full black screen, finger tab will not initiate video playback.

Compared side by side with with a-video. followed steps in https://aframe.io/docs/0.3.0/primitives/a-videosphere.html#caveats. a-video works perfectly fine while a-videosphere is not on iOS

<a-assets>
      <video webkit-playsinline autoplay loop crossorigin  id="video"  src="city.mp4"></video>
      <video webkit-playsinline autoplay loop crossorigin id="video1"  src="john.mp4"></video>
</a-assets>

<a-videosphere src="#video" rotation="0 180 0" ></a-videosphere>
<a-video src="#video1" width="16" height="9" position="20 0 -10"></a-video>

[ngokevin]

I found some stuff here: https://github.com/bfred-it/iphone-inline-video

I wonder if you need to add muted to get it to play without user interaction?

[fuleinist]

@ngokevin added iphone-inline-video as well as muted on tag. still has the same problem.

I doubt it's related to user interaction on video play event since a-video works fine once I pined the webpage to the iOS homescreen.

[ngokevin]

Hm, they should both follow down the same code path. plane/sphere shouldn't make a difference.

What if it's just one video? And does the city.mp4 video play on desktop? What if we try to play #video1 on the videosphere?

[fuleinist]

wow, videosphere actually worked after I reversed the video content....

the city video is the same 360 video on aframe.io demo page. The other one is just a random mp4 video. Now it's confirmed to be a problem with the video file.

After some google search I believe now this is the root:

One important thing to note is that "iDevices" doesn't support all the varieties of mp4. Here is a small list about MPEG-4 and H.264 supported varieties.
According to Apple official website, iPad or iPhone 4S is only compatible with H.264 or MPEG-4 video format with the following specifications:
If it is MPEG-4 video, it should meet: up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats;

https://confluence.atlassian.com/confkb/unable-to-play-embedded-mp4-videos-on-ipad-or-iphone-in-confluence-305037325.html

Will try to downgrade the total bit rate to less than 2.5Mbps and will see how we goes.

[ngokevin]

Thanks for the investigation. We should re-encode our example video and document the restrictions.

[fuleinist]

No Problem. Works well after rate downgrade. Wish Apple make a better html5 video player in iOS10. This issue can be closed for now : )

[ngokevin]

Will keep the issue around for now to do those couple tasks.

[vrimaginar]

The way we do it;

• Check for the least powerful device to run the video on (we target the iPhone 5S as the least powerful device on iOS).
• Encode three video's from the source material (in our case 3840 x 1920 50mb/s h.265). Reencode to h.264 15mb/s for desktops and mobile devices with a 2560 x 1440 resolution. Reencode to 1920 x 960 h.264 15 mb/s for all other mobile devices except the iPhone / iPad. For idevices use 1366 x 683 h.264 5 mb/s. It runs smooth and looks very crisp.
• For reencoding a video use Handbrake with audio passthrough.