Video not showing in iOS

[Burndog (Steve)]

Hello,
I have a video that has .mp4, .ogv and .webm fall backs
It plays on Safari, Firefox and Chrome on the desktop but fails on an iPhone and iPad (latest version OS’s)

The video is in the left column , top on this page:
http://rivieralaser.com/

Any ideas what could be the problem? Server MIME? <-- expected multiple browser tests on desktop cleared that though…

[MarkHunte]

There are a number of errors being returned.

See my new tip on how to see these:

Debug issues on Mobile Safari & Projects run in iOS Apps using Safari on a Desktop

You will some times run into a problem where your project works on a Mac but not an iOS device. You can of course use Hype Reflect’s console but it’s reporting is limited. Also you may have everything work on the iOS device when pushed locally to Hype Reflect but not on your real server. Some of you are familiar already in using a Desktops web browsers built in console to debug issues and this tip is not an in-depth in using the console. But by plugging your device into your Mac and openi…

Your issue made me remember about this.

[Burndog (Steve)]

I have tested also using Hype Reflect and this produces the same condition (Video does not show but button animation confirms playing is happening).

I have a new isolated file for testing:
http://www.rivieralaser.com/celiadava.html

Mark, using your tip the plugged in iPhone briefly flashed and it’s presence on the Mac using Safari and the Develop drop down. Flashed meaning, it showed when initially connecting then when iTunes did it’s automatic inclusion of the new connected device it was no longer present.

I’ve also used the Develop drop down to select a User Agent but that still shows the video properly and does not accurately reflect the iOS case even when that selection is made.

You said a number of errors were present. What were they?

[DBear]

Hi

I cannot help with the errors at the moment but I can suggest why perhaps the video is not playing.

You see, you have a button overlaid on top of the video. The video is autoplaying I assume but in IOS devices you cannot autoplay a video. And the button is stopping the ability to click through to the play button. This is just speculation but it might be it.

[Burndog (Steve)]

DBear, that makes total sense. Thanks.

The goal is to show a message that tells the user they can click to hear the sound (unmute) and then re-click to turn the sound off

CeliaDava.hype.zip (1.7 MB)

I think my only option at this point is to create an icon off to the side of the movie to handle this functionality and still allow access to the Start Player button on the movie…

Thanks again DBear!!!

[DBear]

You’re welcome.

You could probably make the boundaries of the button smaller and move it off centre so that you can touch the play icon for IOS. May not need to move it off the video completely.

[MarkHunte]

I just got back…

I have update the post about the web inspector (step one).

I notice the video is showing on the iOS device now. But as @DBear says auto play does not work.