2015-09-18 18 views
7

c'è un modo per rilevare se la chiamata play() su un elemento video è consentita senza un gesto dell'utente? Su Android Chrome è dato questo avvertimento:La funzione rileva se è necessario il gesto dell'utente

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

Così su Chrome Android un gesto utente è tenuto ad avviare la riproduzione di un video, mentre non è su Chrome desktop. C'è un modo per rilevare quale comportamento otterrò?

Desidero avere un comportamento leggermente diverso nella mia app a seconda che la chiamata programmata sia consentita o meno.

Ho provato a utilizzare Modernizr.videoautoplay, ma questo controlla se la proprietà autoplay sull'elemento, che non è la stessa cosa. Questo dà falsi negativi per IE11 e Edge.

Modifica: aggiunto an example. Il video verrà riprodotto automaticamente in Chrome desktop e IE11 o Edge (con ritardo di 3 secondi) su Windows 8 o 10. Per Chrome @ Android è necessaria un'interazione utente (facendo clic sul pulsante) e il messaggio di errore può essere visualizzato nella console.

+0

puoi pubblicare un esempio di codice che ha quell'errore? – Patrick

+0

Ciao @Patrick Ho aggiornato la domanda con un link ad un esempio. È un po 'complesso (aggiungendo fotogrammi al video bit per bit) ma il problema può essere visto – oskbor

+0

Ciao @oskbor, hai trovato una soluzione per questo? – Biswarup

risposta

4

Il metodo di riproduzione restituisce una promessa che può essere utilizzata per rilevare l'errore.

Non tutti i browser seguono the specification quindi sarà necessario verificare se ciò che viene restituito è una promessa prima.

var autoPlayAllowed = true; 
var promise = document.createElement("video").play(); 
if(promise instanceof Promise) { 
    promise.catch(function(error) { 
     // Check if it is the right error 
     if(error.name == "NotAllowedError") { 
      autoPlayAllowed = false; 
     } else { 
      throw error; 
     } 
    }).then(function() { 
     if(autoPlayAllowed) { 
      // Allowed 
     } else { 
      // Not allowed 
     } 
    }); 
} else { 
    // Unknown if allowed 
} 
+1

Penso che sia necessario verificare prima che esista 'window.Promise', altrimenti si otterrà un errore di riferimento sui browser che non supportano le promesse. – JayPea