Qualcuno sa se il video html5 consente oggetti come pulsanti, menu, ecc connessi alla timeline?html5 oggetti interattivi video
Il flash player di YouTube esegue questo: in un momento specifico, mostra un oggetto (banner, collegamenti, commenti) sul video per determinati secondi.
grazie
Sì e no, E 'possibile creare presentazioni video-based molto interattive utilizzando oggetti video HTML5 comunque richiede molto di più del semplice oggetto video stesso. È possibile nidificare i video in un oggetto canvas e fare un pasticcio con i fotogrammi effettivi dell'immagine video, è possibile sovrapporre qualsiasi elemento html visivo sopra all'oggetto video stesso, quindi animarli, è possibile controllare la riproduzione del video con pulsanti, fare clic sugli eventi ecc. È possibile persino l'oggetto video controlla il resto della pagina con listener basati sul tempo.
Popcorn.js è davvero molto buono e facile da imparare, permettendoti di fare tutto quello che hai menzionato. http://popcornjs.org
Immagino che i video all'interno della tela siano le soluzioni più complete. – Mike
sì è un ambiente più controllato rispetto a dom è anche in genere meno pesante di risorse dato che gli elementi dom sono resi in modo leggermente diverso dal browser e sono soggetti a molti listener ed eventi globali. sarebbe più accessibile a farlo attraverso la dom però. – Alex
non fa parte dello standard video HTML5, ma è facile da implementare manualmente collegando un po 'di script per l'evento progress. Osservando la proprietà currentTime dell'oggetto video è possibile decidere quando mostrare/nascondere elementi aggiuntivi.
ad esempio che mostra un elemento in cima ad un video tra 1 e 2 secondi in un video:
<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>
<script type="text/javascript">
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=1 && video.currentTime<2;
overlay.style.visibility= show? 'visible' : 'hidden';
}, false);
</script>
Inoltre, se fosse semplicemente un testo statico WebVTT (e uno dei tanti polyfill disponibili) potrebbe essere utilizzato. –
X2TV (www.x2.tv) ha un drag and drop studio dove è possibile sovrapporre le icone e contenuti aggiuntivi all'interno dello strato di HTML5.
Nel caso in cui desideri utilizzare un quadro più generico, https://github.com/nise/vi-two potrebbe essere interessante per te.
Il tag HTML5 Video riproduce il video, ma ha anche molte funzionalità che consentono di aggiungere un livello di interattività al di sopra del video. Popcorn.js fa questo, e H5P ha anche una videoteca interattiva in cui è possibile aggiungere ulteriori informazioni testuali, immagini e quiz alla timeline del video. – Almonds