Autoplay multiple inline videos on ios?

Ionic Framework ionic-v3
1

Hi there!

I am still new to Ionic. I am trying to figure out how to implement simultaneous autoplay of multiple inline videos? It seems like only one of the videos will autoplay when using the following method:

<video loop autoplay muted playsinline preload="auto" webkit-playsinline><source src="video.mp4"></video>

Does anyone know how to address this issue?

2

I don’t have an answer for you, but there’s a problem with your code.

You should include a fallback image in case the end-user’s device does not autoplay.

See “examples” half way down…

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

3

Update:

I’ve been able to run 2 videos automatically with no changes from your code above. I verified by creating 2 copies of the video and pointing each link to a unique copy’s name.

This is the environment I tested in:

ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 7.3 Build version 7D175

4

@ryanlogsdon can you please describe your answer in detail by saying pointing each link to a unique copy’s name. Please help.

5

Hi @nicks258,

It’s just…

<div>
    <video loop autoplay muted playsinline preload="auto" webkit-playsinline>
        <source src="video1.mp4">
    </video>
</div>
<div>
    <video loop autoplay muted playsinline preload="auto" webkit-playsinline>
        <source src="video2.mp4">
    </video>
</div>

That’s all it took in the environment that I listed above.

Good luck,
Ryan

6

For ios add in config.xml

<preference name="AllowInlineMediaPlayback" value="true" />