HTML | Propiedad del cartel de vídeo DOM

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:

  1. URL absoluta: Apunta a otra página web.
  2. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *