Su iPhone, la funzione .play() dell'API di Vimeo Javascript non funziona fino a quando il video non è stato riprodotto

Question

Sto usando SwipeView (http://cubiq.org/swipeview) per creare una presentazione scorrevole su dispositivi touchscreen. Questo è abbastanza semplice con le immagini, ma voglio includere anche un video di Vimeo nella presentazione. Sfortunatamente, dato che l'iFrame cattura il tuo swipe input per se stesso (credo che questo sia quello che sta succedendo almeno), una volta arrivato alla diapositiva del video player non puoi più scorrere via da esso a meno che non tocchi l'impaginazione. Questo non è accettabile.

La mia soluzione era nascondere il video da qualche parte sulla pagina (utilizzando display: nessuno o altezza: 0 o qualsiasi altra cosa) e utilizzare un'immagine nella presentazione con un evento click che attiva il video da riprodurre. Anche se il video è nascosto, quando viene riprodotto dovrebbe andare a schermo intero e riprodurre (su iPhone, almeno).

Questa tecnica funziona correttamente durante il test sul browser desktop, ma si sta comportando in modo strano su iPhone. A scopo di test, il video viene visualizzato sotto la presentazione. Se carico la pagina e tocco sulla diapositiva, non fa nulla. Tuttavia, se riproduco il video toccando il vero lettore video, una volta chiuso il video posso riprodurre nuovamente il video toccando la diapositiva. Fondamentalmente, una volta che il video viene riprodotto tramite il lettore, posso riprodurre il video tramite l'API, ma non senza usare il lettore una volta per primo.

Ecco il mio codice:

// 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; 
    }); 
}); 

ho determinato attraverso test che l'evento player.ready funziona correttamente, e che l'immagine di evento click funziona correttamente. Il problema sembra essere interamente nella chiamata player.api('play'). Qualsiasi aiuto o un metodo alternativo per ottenere ciò sarebbe apprezzato.

Answer 1

Dopo aver esaminato questo ulteriore e di trovare altre due domande StackOverflow con lo stesso problema (video players with js API and iPhones e video players with js API and iPhones), così come il fatto che questo stesso comportamento si verifica in un parco giochi API ufficiale di Vimeo, sembra che sia è sia una caratteristica da disegno o un bug con l'API.

Teorizzare: Apple non consente di riprodurre automaticamente i video in Safari mobile. Forse questa limitazione è stata imposta alla fine di Apple per impedirti di utilizzare l'API per riprodurre automaticamente un video con Javascript.

Answer 2

Safari console remota vi mostrerà l'errore sulla console - Error: The viewer must initiate playback first.

Se cercate un video prima di essere giocato, il video non parte (solo iOS; altre piattaforme sembrano ok).

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

quindi è necessario fare qualcosa di simile:

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

Answer 3

Alcuni browser non vietare per innescare il "giocare" con js in principio. Deve esserci un'interazione dell'utente reale per riprodurre il video.

Tuttavia, se si vuole mettere il video Vimeo in un cursore che cosa si può fare è:

1. applicare un'immagine con "pulsante di riproduzione" sulla parte superiore del video
2. set "di opacità: 0 "per l'iframe e impostalo esattamente nella misura & posizione del" pulsante play "(iframe deve essere" schermo permissivo ")
3. una volta che l'utente attiva la riproduzione del video per la prima volta.Trasforma l'iframe in dimensioni normali e lascia che vimeo player.js abbia il controllo.

In questo caso, l'utente deve cliccare sul pulsante "play" per attivare il video