Multiple videos on page not working

[adamjw3]

I have two vidoes on my page that i'm playing using js.

<video id="js-video-experience" preload playsInline muted class="c-header__video" src="/resources/video/fortitude-header-final-v1.mp4"></video>

and ''

I'm triggering the play of both using js, this is the first one

`$("video").each(function () { makeVideoPlayableInline(this); });

var video = $("#js-video-experience").get(0); // Load the video video.load();

    $("#js-video-experience").on("loadedmetadata", function () {
        // Play Video
        $("#js-video-experience").addClass("is-loaded");
        video.play();
    });

`

Then when the first video get to a certain point i'm playing the other

var $this = $("#js-blood"), bloodVideo = $this.get(0); $this.addClass("is-visible"); bloodVideo.play();

This however stops the first video from playing on ios 10 ipad and iphone, ios 9 on iphone 5 is fine.

Any ideas?

[fregante]

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    makeVideoPlayableInline(video, false /* hasAudio */, false /* false = run everywhere */);
}

The third parameter skips the detection of the native inline playback, but I don't think that IIV works well on iOS 10 anyway

[fregante]

In the v2 beta I simplified the usage on iPad. Can you try it and let me know how it goes?

• v2 changelog
• v2 usage documentation
• iphone-inline-video.js
• If you use npm, you can install the beta with: npm install iphone-inline-video@next

[fregante]

v2.0.0 has been published :)

Now you can use the everywhere option, together with the muted attribute:

/// <video muted src="...">
enableInlineVideo(video, {
    everywhere: /iPhone|iPad|iPod/i.test(navigator.userAgent)
});