chrome mobile on iOS 10 not allowing inline

[uotw]

Hello, I'm using the most recent version of iphone-inline-video on iOS10 with the following code:

$(document).ready(function() {
        $('video').each(function (index, value) { 
             makeVideoPlayableInline(document.getElementById($(this).attr('id')), false,false);
              id=$('video').first().attr('id');
              document.getElementById(id).play();
        });
});
...

document.getElementById(id).play(); //TO PLAY, SURROUNDED BY CODE

The videos do not play unless clicked twice, despite my call above. When clicked twice they go full screen. Once I exit full screen they do play programmatically but the play button remains over top.

[uotw]

I was able to get this working by hiding the native play button using CSS and setting autoplay to true when mobile chrome is detected.

[fregante]

Do you have the playsinline and mute attributes? On iOS 10, iphone-inline-video is disabled automatically because this functionality is supported natively with that attribute.

[uotw]

Yes, I do have both these attributes set.

[fregante]

Technically it should be supported so IIV is disabled there. Try StackOverflow since this is an issue with iOS 10 Chrome rather than IIV. Let me know if you find anything

[giannoudak]

Hello all! @uotw i face the same issue on Chrome and Firefox on iOS10. I have to tap to start video playback. When i tap it goes fullscreen and on exit it plays inline.

How did you make it work? Can you please provide some of your sample code for css and js?

Thanks

[fregante]

1. This should look green in all iOS 10 browsers, does it? http://codepen.io/anon/pen/xEdwop
2. Does this work in Chrome/iOS? https://bfred-it.github.io/iphone-inline-video/?enabled=true

[giannoudak]

Hi bfred-it!

1. this looks green only on safari. on chrome and firefox this is red
2. Actually No. The big play button is there. The video goes fullscreen after click to play and when on fullscreen exit it returns playing inline

[fregante]

1. So the native inline playback functionality is not enabled in Chrome and Firefox; therefore IIV would have to be enabled there.
2. Can you try again? The demo was broken

[giannoudak]

i can see the following: the second video never starts playback the first has a large delay to start after i click on Play/Pause button

[fregante]

I'm not sure, but it sounds like this is happening because they broke the automated video.load(). So the first video is loaded after the first tap (instead of being preloaded) and the second video never autoplays because there's no tap and therefore no load() call.

No solution, we just have to wait for the browsers to enable the native playback, also because third-party browsers are not debuggable as far as I know, so I can't even know what is happening exactly.

[uotw]

@giannoudak Here's my working solution. http://codepen.io/utnuc/pen/mAmEyp

[fregante]

I don't think that works, since IIV is not enabled at all on iOS 10 and you're not forcing it with the third parameter.

Also this is a simplified version of your code, you were including some unnecessary code: http://codepen.io/anon/pen/VKbjzy

[uotw]

Both links seem to work here on Chrome, iPhone 6s, iOS10. Stops working when I remove iphone-inline-video.js.

[fregante]

What's the output of this in Chrome/iOS? http://codepen.io/anon/pen/GjmqxX?editors=0010#0 You should see a popup

[uotw]

true,,true

[fregante]

Thanks, appreciated. It looks like Safari 10 did not enable the CSS grid, which is what I was using to detect iOS 10, and therefore IIV still runs on iOS 10.

Also for some reason IIV's autoplay support isn't working, but .play() is.

Try these two solutions:

• Normal play: http://codepen.io/anon/pen/ALRXwO
• Autoplay: http://codepen.io/anon/pen/kkyXVk

[uotw]

On Chrome/iOS, the first link does nothing, blank page. Second link is blank until I hit play, then it plays the video inline w/ audio.

[jakelewis3d]

"It looks like Safari 10 did not enable the CSS grid, which is what I was using to detect iOS 10, and therefore IIV still runs on iOS 10."

So we should change the test: void 0 === document.head.style.grid to something that detects iOS 10?

[fregante]

There's a media query to detect this behavior specifically, but that doesn't fix the issue, since Chrome/iOS 10 doesn't support IIV natively anyway. The fix is in @uotw's comments but I have no time to implement either at the moment.

[fregante]

Chrome/iOS 10 now supports playsinline natively (this is green)

Demo: https://vid.me/CFDy

Firefox on the other hand still doesn't fully support autoplaying video inline on iOS 10, even with IIV. I'm creating a new issue specific to that.

[eysi09]

Actually the is still an issue. The link in your comment above is red on my browser (latest Chrome) and IIV videos are not playing on Chrome iOS (iPhone 6s, iOS 10+). Neither with muted and autoplay nor with a user initiated touch event. Does work on Safari though.

EDIT:

Setting the hasAudio parameter to false as in the codepen above does get the video playing, both with muted and autoplay and with muted=false and an event from the user but there's no sound in either case (obviously that's intended in the former). Again, works fine on Safari even with hasAudio = false.

[fregante]

I don't know what to tell you. Works for me on iOS 10.1. The first demo doesn't work anywhere, it seems, because of connection issues, but the three.js muted autopley demo works natively, without IIV

[eysi09]

Ah my bad. Turns out I wasn't on the latest Chrome version on my iPhone. Sorry for the trouble and thanks for the quick reply.

[fregante]

Update: IIV works 100% on Firefox 5.3 (2) on iOS 10.2: https://github.com/bfred-it/iphone-inline-video/issues/84

I did nothing, but they probably fixed something :)