On iPhone, Vimeo Javascript API .play() function doesn't work until the video has been played

Question

I\'m using SwipeView (http://cubiq.org/swipeview) to create a swipeable slideshow on touchscreen devices. This is simple enough with images, but I want to include a Vimeo vi

Answer 1

Safari remote console will show you the error on the console - Error: The viewer must initiate playback first.

If you seek a video before it's played, the video won't start (iOS only; other platforms seem ok).

player.addEvent('ready', function() {
    player.api("seekTo", 10);
});

So you need to do something like:

if ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    player.addEvent('play', function(id) {
        player.api("seekTo", 10);
    });
} else {
    player.api("seekTo", 10);
}

Answer 2

After investigating this further and finding two other StackOverflow questions with the same issue (video players with js API and iPhones and video players with js API and iPhones) as well as the fact that this same behavior occurs on Vimeo's official API playground, it seems that either it's either a feature by design or a bug with the API.

Theorizing: Apple doesn't allow you to autoplay videos in mobile Safari. Perhaps this limitation is being imposed on Apple's end to prevent you from using the API to autoplay a video with Javascript.

Answer 3

Some browser forbid to trigger the "play" via js in the beginning. There has to be real user interaction to play the video.

However, if you want to put the vimeo video in a slider what you can do is:

1. apply a image with "play button" on top of the video
2. set "opacity: 0" to the iframe and make it exactly the size&position of the "play button" (iframe have to be "allowfullscreen")
3. once user trigger the video play for the first time. Make the iframe to normal size you want and let vimeo player.js take control.

In this case, user have to click the "play button" to trigger the video