¿Alguien sabe si el video html5 permite que objetos como botones, menú, etc. estén conectados a la línea de tiempo?objetos interactivos de video html5
Reproductor de flash de Youtube haga esto: en un momento específico, muestre un objeto (pancarta, enlaces, comentarios) sobre el video por segundos definidos.
gracias
Sí y no, Es posible crear presentaciones basadas en video muy interactivos utilizando objetos de vídeo HTML5 sin embargo, requiere mucho más que solo el objeto de video en sí. Puede anidar video en un objeto de lienzo y luego interferir con los marcos de imagen de video reales, puede superponer cualquier elemento html visual encima del objeto de video y luego animarlos, puede controlar la reproducción de video con botones, hacer clic en eventos, etc. Puede incluso haga que el objeto de video controle el resto de la página con oyentes basados en el tiempo.
Popcorn.js es muy bueno y fácil de aprender, lo que le permite hacer todo lo que ha mencionado. http://popcornjs.org
supongo que los videos dentro del lienzo son las soluciones más completas. – Mike
sí, es un entorno más controlado que el dom. También es generalmente menos pesado en recursos ya que los elementos dom son representados de forma ligeramente diferente por el navegador y están sujetos a una gran cantidad de oyentes y eventos globales. sería más accesible hacerlo a través de la dom. – Alex
que no es parte del estándar de vídeo HTML5, pero es fácil de implementar manualmente cableando algunas secuencias de comandos para el evento progress. Al mirar la propiedad currentTime del objeto de video, puede decidir cuándo mostrar u ocultar elementos adicionales.
por ejemplo, mostrando un elemento en la parte superior de un vídeo de entre 1 y 2 segundos en un vídeo:
<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>
Además, si fuera simplemente texto estático WebVTT (y uno de los muchos polyfills que hay) podría ser utilizado. –
X2TV (www.x2.tv) tiene un arrastrar y soltar estudio donde se puede superponer los iconos y contenido adicional dentro de la capa de HTML5.
En caso de que quiera utilizar un marco más genérico https://github.com/nise/vi-two podría ser interesante para usted.
La etiqueta de video HTML5 reproduce el video, pero también tiene muchas funciones que le permiten agregar una capa de interactividad en la parte superior del video. Popcorn.js hace esto, y H5P también tiene una biblioteca de videos interactivos donde puede agregar información textual adicional, imágenes y cuestionarios a la línea de tiempo del video. – Almonds