Insieme all'immagine del poster, voglio che venga visualizzata un'immagine del caricatore (una gif animata) durante il download del video. Come è possibile ?Come aggiungere l'immagine del caricatore ai video HTML5?
È possibile collegare un ascoltatore all'evento loadstart del video e utilizzarlo per sovrapporre una GIF animata sopra l'elemento video, quindi nascondere la sovrapposizione di caricamento una volta generato l'evento loadeddata. Vedere The W3C's media events draft per un elenco di eventi a cui è possibile collegarsi.
Hanno anche un demo page for media events.
Questo è piuttosto complicato, è necessario ascoltare vari eventi video per mostrare/nascondere & larghezza di aggiornamento dell'immagine del caricatore correttamente. Tali eventi includono (ma non sono limitati a): loadstart, progress, loadeddata, waiting, seeking, seeked. Puoi utilizzare un determinato lettore open source (ad esempio jPlayer) o scaricare la sua fonte per ulteriori informazioni.
Un modo economico potrebbe essere utilizzare una GIF animata nell'attributo poster che verrà sostituito quando il video inizia a essere riprodotto. Esempio:
<video poster="loading.gif" preload="auto" controls autoplay>
<source type="video/mp4" src="video.mp4"/>
</video>
Mi c'è voluto troppo tempo per capire davvero come fare questo, ma ho intenzione di condividerle qui perché ho finalmente 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
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')
});
Questo funziona perfettamente per me, ma testato solo in Chrome e Safari su Mac. Fammi sapere se qualcuno trova bug e/o miglioramenti!
Qui è la mia soluzione a questo problema in quanto la risposta di pixelearth non sembra lavorare su Firefox (probabilmente un problema con il manifesto falso)
HTML
<video id="video1" height="236" preload="auto" controls>
<source src="yourVideo.mp4">
Your browser does not support HTML5 video.
</video>
JS
$('#video1').on('loadstart', function (event) {
$(this).addClass('background');
$(this).attr("poster", "/your/loading.gif");
});
$('#video1').on('canplay', function (event) {
$(this).removeClass('background');
$(this).removeAttr("poster");
});
CSS
video.background {
background: black
}
Con questa risposta non è necessario scherzare con poster falsi o attributi di abuso per scopi per cui non sono stati creati. Spero che questo ti aiuti.
P.S. Naturalmente potresti aggiungere altri eventi per aggiungere l'attributo del poster, ad es. se non può giocare ulteriormente nel mezzo del video e ha bisogno di più di buffering
È possibile trovare una jsfiddle che mostra il mio codice here
bel lavoro in giro! – sputn1k