Solo me pregunto si alguien sabe algún truco para obtener contenido html regular (principalmente una etiqueta img) para mostrar en la parte superior de un video (a través de la etiqueta de video)?Vídeo HTML5: es posible colocar contenido html regular sobre video
¿Por qué no utilizar el atributo poster? De esta forma, puede mostrar una imagen hasta que el video se cargue o juegue.
¿Puedes establecer el video como fondo para ese div? No estoy seguro de si funcionaría para su diseño, pero parece lógico ...
¿cómo se establece un video como fondo? –
Tiene que ver con el uso de los elementos de video
Simplemente puede poner elementos html encima de video HTML5 colocándolos absolutamente en la parte superior del video. Asigne tanto al elemento de video como al elemento HTML como "posición: absoluta" y coloque el elemento HTML en un índice z más alto que el del elemento de video.
¿tiene algún ejemplo de esto funcionando? –
Aquí hay un ejemplo. Pero deberías intentar hacerlo tú mismo la próxima vez. Me cuesta 5 min;): http://jsfiddle.net/GxvyG/ –
Como otros han insinuado, es muy fácil colocar elementos HTML encima de los elementos VIDEO usando posicionamiento absoluto. El desafío surge cuando intenta capturar eventos en ellos en el iPhone, iPod y posiblemente teléfonos Android más antiguos que no reproducen los activos de video en línea en la página (a diferencia de en un cliente de reproducción nativo delgado) ya que en esos casos el elemento VIDEO codiciosamente captura eventos.
Si utiliza un elemento IMAGE o una DIV con su background-image conjunto a una imagen que desea utilizar como un "cartel" o "miniatura", entonces los usuarios no podrán aprovechar en ellos para conseguir el vídeo a comience a jugar: el navegador móvil tratará este comportamiento como si nada más que el elemento VIDEO existiera en ese espacio (bueno si hace clic en el medio donde está el botón "gran jugada" pero no tan útil si, por ejemplo, tiene un control personalizado no en el medio.
la solución que he usado en el pasado es que sólo hay que poner el cartel IMG o DIV en la página donde normalmente poner el elemento VIDEO y cambiar el VIDEO elemento fuera de pantalla (absolutamente posicionado con el estilo left configurado en, digamos, -3000px) por lo que ya no puede acumular esos eventos.
Sé que esto no es exactamente lo que se preguntó, pero espero que esta información resulte útil para alguien.
+1 Acepto tu método. Tuve que implementar una biblioteca de terceros que requería una acción del usuario, es decir, hacer clic en un botón. Quicktime Player fue una pesadilla. Inicialmente configuré el elemento de video para mostrar: ninguno y solo lo mostré después de la acción de los usuarios. Su método es perfecto, ya que no importa dónde viva el elemento de video, ya que después de todo, se abrirá en pantalla completa en cualquier lugar. Un poco de css puede engañar a los usuarios – sidarcy
http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements – RobW
la idea es que estoy tratando de integrar el video en una parte del diseño del sitio, donde un área en la parte superior del video se superpone para hacer que el video aparezca como si estuviera parcialmente debajo. Traté de poner la imagen dentro del video en sí, pero debido a la compresión, los colores y el tamaño cambian ligeramente y la diferencia es bastante notable. –
La única solución que se me ocurre para este ejemplo en particular es colocar automáticamente el div/img en la parte superior del video con JavaScript. De esta forma, el video se cargará junto con la página y no interferirá con la imagen. Es posible que desee vigilar el índice z. –