Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
fuleinist opened this issue Aug 24, 2016 · 20 comments
Open

Comments

@fuleinist
Copy link

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
Copy link
Member

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
Copy link
Author

fuleinist commented Aug 24, 2016

@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
Copy link
Member

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
Copy link
Author

fuleinist commented Aug 24, 2016

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

capture

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

@ngokevin
Copy link
Member

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

@fuleinist
Copy link
Author

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 ngokevin changed the title a-videosphere no working on iOS a-videosphere no working on iOS -- encode city.mp4 to work on iOS, document iOS video encoding restrictions Aug 24, 2016
@ngokevin
Copy link
Member

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

@ngokevin ngokevin changed the title a-videosphere no working on iOS -- encode city.mp4 to work on iOS, document iOS video encoding restrictions encode city.mp4 to work on iOS, document iOS video encoding restrictions Aug 24, 2016
@vrimaginar
Copy link

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
Copy link
Collaborator

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

@Utopiah
Copy link
Contributor

Utopiah commented Jun 17, 2017

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
Copy link
Contributor

cvan commented Jun 30, 2017

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
Copy link
Contributor

Utopiah commented Jun 30, 2017

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

machenmusik added a commit to chenzlabs/aframe that referenced this issue Oct 8, 2017
@Hiphone-Du
Copy link

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

@Hiphone-Du
Copy link

i have solve this problem with creating a button to play

@Shaymaa1986
Copy link

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

@machenmusik
Copy link
Contributor

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
Copy link

<script> window.addEventListener('click', function () {  var v = document.querySelector('#vid');  v.play(); }); </script>

<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
Copy link
Contributor

machenmusik commented Sep 17, 2018

@Utopiah
Copy link
Contributor

Utopiah commented Sep 17, 2018 via email

@machenmusik
Copy link
Contributor

machenmusik commented Sep 17, 2018 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants