Aframe: 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.

[gurumukhi]

Hi @ngokevin, Is this issue good as 'help wanted (easy)'?

[Utopiah]

Here is a lower resolution version that works on an iPhone 6S with iOS10 10 https://vatelier.net/MyDemo/videosphere-showcase/

The video file itself is https://vatelier.net/MyDemo/videosphere-showcase/city_halfres.mp4 that I downgraded using ffmpeg -y -i city.mp4 -vf scale=2048:1024 city_halfres.mp4.

[cvan]

FWIW, I already fixed this in master in PR #2656. are y'all referring to something else?

After a lot of trial and error, the command I used was this:

ffmpeg -i city.mp4 -vf scale=3168:-2 city-3168.mp4

[Utopiah]

@cvan you're right it's just the resolution

[Hiphone-Du]

@fuleinist but it can not work on iOS 11, i have try all kinds of solution. is any other people like me ?

[Hiphone-Du]

i have solve this problem with creating a button to play

[Shaymaa1986]

can you pleas post the code. i have also try all kinds of solution.

[machenmusik]

The 360 video example on Glitch should have click to play, if I recall correctly...

Generally the issue is browser restrictions on autoplay of video/audio, and not A-Frame.

[Shaymaa1986]

<a-assets>  <video id='vid' src="imgs/video-1920x960.mp4" autoplay> </a-assets> <a-scene>  <a-sky rotation="0 -90 0" src="#vid"></a-sky> </a-scene>

have this simple code. it work in firefox , not in safari. can you tell me where is the problem

[machenmusik]

see https://glitch.com/edit/#!/aframe-360-video-example
(try it here: https://aframe-360-video-example.glitch.me )

[Utopiah]

Not sure GitHub issues are the best place for this kind of support but it
does highlight that more complete and documented examples are needed.

[machenmusik]

There is actually a section in the FAQ about this, e.g. https://aframe.io/docs/0.8.0/introduction/faq.html#why-does-my-video-not-play-on-mobile

Since then, however, the restrictions on autoplay content have spread from mobile to desktop, and it doesn't look like the documentation has kept up with that aspect.

You are right of course that "how do I" questions usually get asked and answered on StackOverflow or similar.

On September 17, 2018 1:27:25 AM EDT, Fabien Benetou [e-mail] wrote:

Not sure GitHub issues are the best place for this kind of support but
it
does highlight that more complete and documented examples are needed.

--
You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/aframevr/aframe/issues/1846#issuecomment-421893018

--
Sent from my Android device with K-9 Mail. Please excuse my brevity.