La propiedad Video poster se usa para establecer o devolver el valor del atributo poster de un video . El atributo de póster se usa específicamente para mostrar una imagen mientras se descarga el video, o hasta que el usuario presiona el botón de reproducción. El primer cuadro del video se muestra si la opción de póster no está incluida.
Sintaxis: Devuelve la propiedad del cartel:
videoObject.poster
Establezca la propiedad del póster:
videoObject.poster = URL
Valores de propiedad
- URL: se utiliza para especificar la URL del archivo de video.
Dos valores posibles:
- URL absoluta: Apunta a otra página web.
- URL relativa: Apunta a otros archivos de la misma página web.
El siguiente programa ilustra la propiedad Video Poster:
Ejemplo: Cambiar la imagen del cartel de un video.
html
<!DOCTYPE html> <html> <head> <title>DOM Video poster Property</title> </head> <body style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2 style="font-family: Impact"> Video Poster Property </h2> <br> <video id="Test_Video" width="360" height="240" poster="gfg_200X200.png" controls> <source src="samplevideo.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> <p>To change the poster image, double click the "Change Poster" button.</p> <button ondblclick="My_Video()" type="button">Change Poster</button> <script> function My_Video() { document.getElementById( "Test_Video").poster = "Unknown.png"; } </script> </body> </html>
Salida: Antes de hacer clic en el botón:: Después de hacer clic en el botón: Navegadores compatibles:
- safari de manzana
- explorador de Internet
- Firefox
- Google Chrome
- Ópera
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA