even a simple <a-video> doesn't play on Safari (iOS/OSX)

[michaelybecker]

Description:

• A-Frame Version: 0.7.0
• Platform / Device: OSX (mid 2015 Macbook Pro) / iOS (iPhone 6)
• Reproducible Code Snippet or URL:

...

        <a-entity material="shader: flat; src: #vid" geometry="primitive: plane;" position="0 1.3 -3.1"
        rotation="0 0 0" scale="3 2 2">

...

This is semi-pseudo because I can't link to an actual file without also triggering CORS issues. To repro please try serving a local mp4 (or presumably any other format - I've tried .flv to confirm).

On loading the simplest video file in a-frame Safari throws the same error mentioned here on iOS as well as desktop. There is no issue if:

1. the file is loaded as a
2. the file is loaded on Chrome (iOS/OSX)
3. the file is loaded on FF (iOS/OSX)

So, I believe, it really comes down to a Safari webgl issue.

Not sure this can be fixed at the a-frame level but at the very least I wanted to leave a pointer to the original threejs error. I'd also love to know if anyone else is able to create a simple video texture (per the above code) in a-frame and have it work without a hitch on Safari (either iOS or OSX).

[ngokevin]

I think it's the most asked question. See https://aframe.io/docs/0.7.0/introduction/faq.html#why-does-my-video-not-play-on-mobile, supporting inline video on iOS is a PITA.

[michaelybecker]

Oops - can't believe I never encountered it before, thanks. That said, this is bigger than mobile - I'm able to repro on OSX as well. Safari just doesn't play nice across the board. (Unlike the original bug, I'm able to make it work in FF)

[machenmusik]

There are a few issues that could be in play here with Safari. Longstanding CORS bugs, HW acceleration related shader interactions, HLS quirks vs. usual MP4, codec profile/resolution support

[michaelybecker]

just to focus the problem, as I'd mentioned before, the file plays fine in safari without WebGL so I don't think there's some inherent non-gl-related problem in Safari. I suspect this pertains to the implementation of that particular shader per the detailed debate in the bug I referred to.

[donmccurdy]

See also: #2976

And, there are changes incoming that might cause similar effects on Chrome 64: https://www.theverge.com/2017/9/15/16311310/google-chrome-autoplay-videos-january

That is, autoplay is disallowed unless the user has interacted somehow. I haven't been able to find out if this interaction will work the same way it does on iOS, e.g. video must be played during the event callback.

short version, if you want to autoplay video the safest option is to have a "Start Experience" button before the user enters VR, and begin the video then.

EDIT: ah reading your comments more closely, autoplay is not the only headache yeah. 😕

[michaelybecker]

oh, interesting - autoplay muted works in other browsers (and requires "muted" due to similar restrictions), but you think the problem is related to autoplay rather than that shader error?

Worth a try, anyway - thanks. I'll report back.

[donmccurdy]

you think the problem is related to autoplay rather than that shader error?

could be a lot of things sadly

[michaelybecker]

Update: @mayognaise 's module saved the day - playing on Safari/OSX, stuttering but probably improvable on Safari iOS. Gonna dig under the hood a bit to see how it does it.

[machenmusik]

Does this codepen work if you click? https://codepen.io/machenmusik/pen/gRPZqd

[michaelybecker]

Can you clarify what you mean by "work"? That codepen video is a single frame so there's no way to test whether Safari (or any other browser for that matter) would run into the same issues. The main problem - also evident in this AFrame Videos example - is that Safari freezes on the first frame and won't play.

[machenmusik]

OK, how about https://codepen.io/machenmusik/pen/boLZKQ which works for me in Safari on MacOS?

[michaelybecker]

Works on safari/iOS! Very interesting, thanks for the example. I’ll take a closer look on Monday.

…

On Sat, Oct 7, 2017 at 9:37 AM machenmusik ***@***.***> wrote: OK, how about https://codepen.io/machenmusik/pen/boLZKQ which works for me in Safari on MacOS? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKfQLmKOJaioKUYu1CTmF1lYObX8DLZKks5sp6iFgaJpZM4Pw6IB> .

[machenmusik]

No problem - the usual culprits with video not working are:

• hosting of the particular media files and either CORS headers, content-type settings, or both
• the particular video settings used to encode don't match what the device/OS will play
• mobile autoplay restrictions

[michaelybecker]

Very useful, thanks. I had ruled out CORS because it was locally served and mobile encoding / auto play issues because it worked on FF and Chrome on iOS, and because it threw this strange old shader warning. But per usual with Safari all bets are off - and it helps to have a working example.

…

On Sat, Oct 7, 2017 at 1:32 PM machenmusik ***@***.***> wrote: No problem - the usual culprits with video not working are: - hosting of the particular media files and either CORS headers, content-type settings, or both - the particular video settings used to encode don't match what the device/OS will play - mobile autoplay restrictions — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKfQLmbEPDnJ4jAOmcZHrD52Xs-eU8qBks5sp9-VgaJpZM4Pw6IB> .

[SteveX]

This weekend I have found that videos with sound won't play on iPhone. They will play if they have no audio tracks, or if the muted attribute is added to the video element.

This happens using Firefox , Chrome and Safari, and when pinned to home screen. iOS 11.01 and 11.02

[michaelybecker]

Yeah, that’s a known restriction - can only auto play muted.

…

On Sun, Oct 8, 2017 at 5:29 AM SteveX ***@***.***> wrote: This weekend I have found that videos with sound won't play on iPhone. They will play if they have no audio tracks, or if the muted attribute is added to the video element. This happens using Firefox , Chrome and Safari, and when pinned to home screen. iOS 11.01 and 11.02 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3136 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKfQLkGmdSZMXkEDlyxBpCS5QGkbxzivks5sqL_5gaJpZM4Pw6IB> .

[machenmusik]

https://webkit.org/blog/6784/new-video-policies-for-ios/

[ngokevin]

I don't think there is anything actionable here besides continued awareness of the restrictions and policies. Send a PR to the FAQ/docs if there's anything to add.

[banada]

OK, how about https://codepen.io/machenmusik/pen/boLZKQ which works for me in Safari on MacOS?

@machenmusik Thank you for the working example! Our splash screen click event wasn't enough for mobile Safari, it needed the window click.

[machenmusik]

No problem, glad it helped you!

[sakshi-oodles]

Hi,

i tried playing a 360-video in a-frame and it works fine on android and desktop but on ios it does not work. If i mute the video the starting of the video works but i need the sound and i am getting Audio handler rejection error.

i am using all these in video id- crossorigin="anonymous" muted playsinline webkit-playsinline onerror="fallback(parentNode)
and i am calling videoPlayer.play() method to play video.

But if i call muted=false then i started getting audio rejection handler error, and i need to play with sound/audio. Some ideas how to fix that? how can i play video with sound on iphone browsers?

Thanks