Reputation: 4266
I'm trying to autoplay a video included in a iframe
on mobile devices.
The app works well, but the user must click on the button inside the iFrame to play the video.
I already tried to use the "autoplay=1"
parameter in the iframe
but it didn't work on mobile (on desktop well).
Can you help me?
Upvotes: 2
Views: 21225
Reputation: 9
Here's my implementaion! I used a library called plyr from Plyr.io
HTML
<div class="plyr__video-embed" id="player">
<iframe
src="https://player.vimeo.com/video/videoID?loop=true&autoplay=1&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
Javascript
document.addEventListener("DOMContentLoaded", function() {
const player = new Plyr('#player', {
autoplay: true,
controls: false,
loop: {active: true},
clickToPlay: false,
muted: true
});
document.querySelector('[data-play]').addEventListener('click', () => {
player.play();
});
setTimeout(() => {
document.querySelector('[data-play]').click();
console.log("play");
}, 2000)
});
It allows playing Vimeo videos automatically on browsers. It works with youtube also Don't forget to include javascript and css file for plyr library.
Upvotes: 0
Reputation: 11
The link above clearly states that Vimeo won't support mobile autoplay feature. Try using YouTube or BrightCove and I'm certain they do.
Upvotes: 1
Reputation: 194
I tried Vimeo iframe player with iOS 11 and autoplay parameter works well. Only problem is with playing video inline. It seems not possible (at least I couldn't do it).
I tried it also with android (SDK 19 - Android 4.4 and above). Autoplay param doesn't work here for me but I am able to autoplay videos with little workaround:
player.loadVideo(videoId).then(function(id)
{
player.play()
player.pause()
setTimeout(function() { player.play() }, 750)
})
The player have to be initialized with random video, for example:
player = new Vimeo.Player('player', {
id: 59777392,
//autoplay: 1 // only for iOS, it is not necessary on Android
})
and after player.ready()
method is fired you can call loadVideo(videoId)
like I showed above.
Upvotes: 1
Reputation: 1656
As @A.Wolff remarks, autoplay
is disabled by design to preserve bandwidth.
It's, for instance, possible to "trick" iOS into thinking that the user clicked the play button (Google it, if you want to know how).
However, Vimeo would have to implement this since you won't be able to manipulate the contents of an iframe
from an external source.
Conclusion: You can't autoplay an embeded Vimeo video on mobile devices.
(For the curious, I did some digging in the source of the embed player via remote debugging in Safari and wasn't able to find a way to get the video to play without tapping the play button)
Upvotes: 7