HTML: reproducir un video dentro de una imagen

Question

Estoy tratando de reproducir un video dentro de una imagen PNG de un televisor para que el televisor sirva de marco para el video.

Intenté algo así, pero simplemente empuja la imagen del televisor y reproduce el video debajo.

<img class="tv" src="images/tv.png" alt="Tv"> 
    <video width="320" height="240"> 
    <source src="video/video.mp4" type="video/mp4" /> 
    </video> 
</img> 

¿Puede ayudarme a encontrar mi camino hasta allí? Porque estoy seguro de que hay una solución fácil, pero realmente no sé dónde buscar. ¡Muchas gracias!

Answer 1

En primer lugar, no se puede utilizar <img> esta manera, porque es un elemento que no puede contener otros elementos.

Todo lo que tiene que hacer es poner su imagen como fondo para div y luego pantalla de vídeo con la posición correcta:

<div id="tv_container"> 
    <video width="320" height="240"> 
     <source src="video/video.mp4" type="video/mp4" /> 
    </video> 
</div> 

<style> 
#tv_container { 
    background: url('images/tv.png') no-repeat top left transparent; 
    width: 400px; /* Adjust TV image width */ 
    height: 300px; /* Adjust TV image height */ 
    position: relative; 
} 
#tv_container video { 
    position: absolute; 
    top: 30px; /* Adjust top position */ 
    left: 40px; /* Adjust left position */ 
} 
</style> 

o en lugar de position: relative; y position: absolute; puede utilizar margin: 30px 0px 0px 40px; para #tv_container video (pero truco con position es mejor cuando se desea añadir más elementos en #tv_container.

supuse que la imagen de TV es más grande que video, pero hay que ajustar algunas cosas para que se muestre correctamente.

---

Inspirado en respuesta Guilherme Santos J, sugieren que la imagen de TV que puede utilizar como capa sobre la video, porque de esta manera se puede utilizar la imagen y pantalla de televisión que no tiene que ser estricto rectángulo. Por supuesto, parte del video se recortará entonces, pero se verá como una pantalla de televisión.

<div id="tv_container"> 
    <video width="320" height="240"> 
     <source src="video/video.mp4" type="video/mp4" /> 
    </video> 
</div> 

<style> 
#tv_container { 
    width: 400px; /* Adjust TV image width */ 
    height: 300px; /* Adjust TV image height */ 
    position: relative; 
} 
#tv_container:after { 
    content: ''; 
    display: block; 
    background: url('images/tv.png') no-repeat top left transparent; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    z-index: 10; 
} 
#tv_container video { 
    position: absolute; 
    top: 30px; /* Adjust top position */ 
    left: 40px; /* Adjust left position */ 
    z-index: 5; 
} 
</style> 

Asegúrese z-index de la capa (que en este caso es #tv_container:after pseudo-elemento) es mayor que video 's z-index. Y hay una cosa: su video no se podrá hacer clic (porque está debajo de la capa) Según @ brichins's comment también es posible hacer que el video se pueda hacer clic debajo de la capa (¡gracias!).

¡Por supuesto, la parte de la pantalla de la televisión debe ser transparente!

Answer 2

Puede establecer la imagen como fondo de un div ligeramente más grande que el video. Centre el video en el div y aparecerá para enmarcar el video con la imagen.

<div id="video_container"> 
    <video width="320" height="240"> 
     <source src="video/video.mp4" type="video/mp4" /> 
    </video> 
</div> 

CSS:

#video_container { 
    background-image: url('images/tv.png'); 
    height: 300px; 
    width: 400px; 
} 
video { 
    text-align: center; 
    /* or 
    padding: 30px 40px; 
    */ 
} 

Answer 3

intentar algo como esto http://jsfiddle.net/CNj3A/

Consiste en un div con una imagen de fondo. También establezco el atributo de relleno, por lo que los bordes de la imagen de televisión en el fondo se mostrarán incluso con algún otro elemento dentro de div tvBorder.

Dentro de usted inserte cualquier elemento que desee. Podría ser un <video>, otra <div>, un <image> etc.

<div id="tvBorder" style="background-image: url('http://cis.umary.edu/studentwebs/Fall%202009/Sandvig/ch4/tv_border.png'); background-repeat:no-repeat; width:625px; height:532px; padding:80px;"> 
    <video>....</video> 
</div>​