Come creare un'immagine di caricamento durante il caricamento di video HTML5?

Question

poiché il video player richiede tempo per caricare il video mp4. può supportare HTML5 per riprodurre un logo di "caricamento" durante il caricamento del video?

perché le mie applicazioni ASP.NET è una pagina mobile, ha bisogno di utente clicca sul video per riprodurre il video (Android, iPhone non supporta autoplay). in modo che non possa creare un logo di "caricamento" come poster, altrimenti l'utente confonderà. Voglio visualizzare un logo di caricamento quando l'utente fa clic sul pulsante di riproduzione su iPad.

grazie

Joe

Answer 1

Utilizzare il poster tag id

<video controls="controls" poster="/IMG_LOCATION/IMAGENAME"> 

Maggiori informazioni si possono trovare http://www.w3schools.com/html5/att_video_poster.asp

Answer 2

Probabilmente potrebbe fare con JavaScript con la creazione di una sovrapposizione di immagini con una animato "caricamento" gif che viene visualizzato solo quando il video si sta caricando e non è pronto per la riproduzione.

Dovresti scrivere JavaScript per collegarti con l'API multimediale per rilevare quando il video è pronto per la riproduzione e così via (in modo da poter nascondere di nuovo l'immagine), ma dovrebbe essere possibile.

Answer 3

Mi ci è voluto troppo tempo per capire come farlo, ma lo condividerò qui perché FINALMENTE ho trovato un modo! Il che è ridicolo quando ci pensi, perché caricare è qualcosa che tutti i video devono fare. Penseresti che ne avrebbero tenuto conto al momento della creazione dello standard video html5.

La mia teoria originale che ho pensato che avrebbe dovuto funzionare (ma non sarebbe) è stato il caricamento delle immagini bg questo

1. Aggiungi al video durante il caricamento tramite js e css
2. Remove quando si è pronti a giocare

Semplice, giusto? Il problema era che non riuscivo a far visualizzare l'immagine di sfondo quando sono stati impostati gli elementi di origine o se è stato impostato l'attributo video.src. L'ultimo colpo di genio/fortuna è stato scoprire (attraverso la sperimentazione) che l'immagine di sfondo non scomparirà se il poster è impostato su qualcosa. Sto usando un'immagine di un manifesto falso, ma immagino che possa funzionare anche con un'immagine 1x1 trasparente (ma perché preoccuparsi di avere un'altra immagine). Quindi questo rende questo probabilmente una sorta di hack, ma funziona e non devo aggiungere extra markup al mio codice, il che significa che funzionerà su tutti i miei progetti usando il video html5. (Classe di carico applicata al video con JS)

HTML

<video controls="" poster="data:image/gif,AAAA"> 
    <source src="yourvid.mp4" 
</video> 

CSS

video.loading { 
    background: black url(/images/loader.gif) center center no-repeat; 
} 

JS

$('#video_id').on('loadstart', function (event) { 
    $(this).addClass('loading'); 
    }); 
    $('#video_id').on('canplay', function (event) { 
    $(this).removeClass('loading'); 
    $(this).attr('poster', ''); 
    }); 

Questo funziona perfettamente per me, ma testato solo in Chrome e Safari su Mac. Fammi sapere se qualcuno trova bug e/o miglioramenti!

Answer 4

anche una soluzione semplice per aggiungere un'immagine precaricatore durante il caricamento del video: HTML:

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png"> 

il manifesto è un 1px un'immagine trasparente.

CSS:

video { 
    background-image: url(images/preload_30x30.gif); 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    background-position: center; 
    } 

Answer 5

La mia soluzione era quella di aggiungere la seguente all'interno della window.fbAsyncInit = function():

var finished_rendering = function() { 
    var el = document.querySelector('div#loading_msg'); 
    el.style.display="none"; 
} 

FB.Event.subscribe('xfbml.render', finished_rendering); 

Trovato: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12