Autoplay attribute breaks functionality (Angular, Meteor)

[manuelnaturalcycles]

Hello, I love this polyfill, we will use it in production! So many thanks for the work put on this.

The only problem that I have is this:

<video class="introPage-backVideo introPage-fadeable" ng-class="{'introPage-fadedOut': vm.playingOnboarding}" src="videos/loop.mp4" autoplay muted loop playsinline></video>

$backVideo = $('.introPage-backVideo')
backVideoDOMElement = $backVideo.get(0) as HTMLMediaElement
window.makeVideoPlayableInline(backVideoDOMElement, false)

in this case the video still goes automatically to full-screen typical native video behavior in ios8 and 9

if i remove the autoplay and instead use:

$backVideo = $('.introPage-backVideo')
backVideoDOMElement = $backVideo.get(0) as HTMLMediaElement
window.makeVideoPlayableInline(backVideoDOMElement, false)
backVideoDOMElement.play()

it works like a charm.

so somehow 'autoplay' as html attribute has to be replaced by '.play()' on dom element.

Any clues?

[fregante]

On what iOS version does this happen?

Does it go fullscreen automatically? On autoplay?

[manuelnaturalcycles]

Sorry if I was not clear, that is correct: Video tag with autoplay attribute goes fullscreen automatically.

I reproduce this in Xcode simulator iOS 8.4 / iPhone 5.

[fregante]

It looks like the same issue as #59 (comment)

I might have to document this issue but it only seems to happen with these big frameworks (Angular/Meteor) and I don't really have time to figure out why. Here's your workaround, in case anyone else needs it:

Workaround

If autoplay triggers an automatic fullscreen, remove the attribute and then play the video manually:

var video = document.querySelector('video');
if (makeVideoPlayableInline.isWhitelisted) { // only remove the attribute on iPhones
  video.removeAttribute('autoplay');
  makeVideoPlayableInline(video);
  video.play();
}

[JianhuisHuang]

The pause button can not show when playing inline. @fregante