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 video in the slideshow as well. Unfortunately, because the iFrame captures your swipe input for itself (I believe this is what's happening at least), once you've arrived at the video player slide you can no longer swipe away from it unless you tap on the pagination. This isn't acceptable.

My solution was to hide the video somewhere on the page (using display: none; or height: 0; or whatever works) and use an image in the slideshow with a click event that triggers the video to play. Even if the video is hidden, when it plays it should go fullscreen and play (on iPhone, at least).

This technique is working fine when I test it on my desktop browser, but it's behaving strangely on the iPhone. For testing purposes, the video is being displayed underneath the slideshow. If I load the page and tap on the slide, it does nothing. However, if I play the video by tapping the actual video player, once the video has been closed I can play the video again by tapping the slide. Basically, once the video is played via the player I can play the video via the API but not without using the player once first.

Here is my code:

// Append the "hidden" video player to the page
$('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>");

// Get the player object
var iframe = $('#slideshow-player')[0],
    player = $f(iframe);

// When the video is ready
player.addEvent('ready', function() {
    // Add the click event to the slide
    $('#play-video').on('click', function() {
        // Play the video
        player.api('play');

        // Don't jump the page
        return false;
    });
});

I have determined through testing that the player.ready event is working properly, and that the image's click event is working properly. The problem seems to lie entirely in the player.api('play') call. Any help, or an alternate method of accomplishing this would be appreciated.

Answer 1

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 2

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 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