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

Comments

Projects
None yet
9 participants
@fuleinist

fuleinist commented Aug 24, 2016

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

This comment has been minimized.

Member

ngokevin commented Aug 24, 2016

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

This comment has been minimized.

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

This comment has been minimized.

Member

ngokevin commented Aug 24, 2016

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

This comment has been minimized.

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

This comment has been minimized.

Member

ngokevin commented Aug 24, 2016

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

@fuleinist

This comment has been minimized.

fuleinist commented Aug 24, 2016

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 from a-videosphere no working on iOS to a-videosphere no working on iOS -- encode city.mp4 to work on iOS, document iOS video encoding restrictions Aug 24, 2016

@ngokevin

This comment has been minimized.

Member

ngokevin commented Aug 24, 2016

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

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

@vrimaginar

This comment has been minimized.

vrimaginar commented Sep 4, 2016

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

This comment has been minimized.

Collaborator

gurumukhi commented Jun 16, 2017

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

@Utopiah

This comment has been minimized.

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

This comment has been minimized.

Member

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

This comment has been minimized.

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

This comment has been minimized.

Hiphone-Du commented Aug 30, 2018

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

@Hiphone-Du

This comment has been minimized.

Hiphone-Du commented Aug 30, 2018

i have solve this problem with creating a button to play

@Shaymaa1986

This comment has been minimized.

Shaymaa1986 commented Sep 16, 2018

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

@machenmusik

This comment has been minimized.

Collaborator

machenmusik commented Sep 16, 2018

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

This comment has been minimized.

Shaymaa1986 commented Sep 16, 2018

<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

This comment has been minimized.

Collaborator

machenmusik commented Sep 17, 2018

@Utopiah

This comment has been minimized.

Contributor

Utopiah commented Sep 17, 2018

@machenmusik

This comment has been minimized.

Collaborator

machenmusik commented Sep 17, 2018

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