Vídeo HTML5 – Barcelona Geeks

En este artículo, conoceremos HTML5 Video , además de conocer las diferentes formas de agregar videos a la página HTML y comprender su implementación a través de los ejemplos. Antes de que existiera HTML 5, los videos solo se podían reproducir en un navegador usando un complemento como flash. Pero después del lanzamiento de HTML 5, agregar un video a una página web es tan fácil como agregar una imagen. El elemento «video» de HTML5 especifica una forma estándar de incrustar un video en una página web.

Hay tres formatos diferentes que comúnmente son compatibles con los navegadores web: mp4, Ogg y WebM. La siguiente tabla enumera los formatos admitidos por diferentes navegadores:

Navegador	MP4	WebM	OGG
Google Chrome	Sí	Sí	Sí
explorador de Internet	Sí	No	No
Firefox	Sí	Sí	Sí
Ópera	Sí	Sí	Sí
Safari	Sí	Sí	No

Sintaxis:

 <video src="" controls>   </video>

Los atributos que se pueden usar con la etiqueta «video» se enumeran a continuación:

Reproducción automática : le dice al navegador que comience a descargar el video de inmediato y lo reproduzca tan pronto como pueda.
Precarga : tiene la intención de proporcionar una pista al navegador sobre lo que el autor cree que conducirá a la mejor experiencia de usuario.
Bucle : le dice al navegador que reproduzca automáticamente el video.
altura : Establece la altura del video en píxeles CSS.
ancho : Establece el ancho del video en píxeles CSS.
Controles: Muestra los controles de video predeterminados como reproducción, pausa, volumen, etc.
Silenciado : Silencia el audio del video.
Poster : Carga una imagen para previsualizar antes de cargar el video.
src : se utiliza para especificar la URL del archivo de video.

Ejemplo: este ejemplo ilustra el uso de la etiqueta <video> donde hemos usado el atributo de precarga cuyo valor se establece en automático, lo que especifica que el navegador debe cargar el video completo cuando se carga la página.

HTML

<!DOCTYPE html>
<html>
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>HTML video tag</h3>
         
 
 
<p>Adding video on the webpage
             
 
 
<p>
                <video width="450"
                       height="250"
                       controls
                       preload="auto">
                    <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                       type="video/mp4">
                    <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                       type="video/ogg">
                </video>
    </center>
</body>
</html>

Producción:

Comprenderemos las diversas formas de implementar la etiqueta <video> a través de los ejemplos.

Agregar video usando HTML5:

Ejemplo: Este sencillo ejemplo ilustra el uso de la etiqueta <video> en HTML. Aquí, el atributo de controles se usa para agregar controles como reproducción, pausa, volumen, etc., y el elemento «fuente» se usa para especificar el video que el navegador elegirá reproducir.

HTML

<!DOCTYPE html>
<html>
<body>
     
 
 
<p>Adding Video on my webpage </p>
 
 
 
 
    <video width="400"
           height="350"
           controls>
        <source src="myvid.mp4"
                type="video/mp4">
        <source src="myvid.ogg"
                type="video/ogg">
    </video>
</body>
</html>

Producción:

Adición de vídeo al HTML.

Reproducción automática de un video usando HTML5: para iniciar un video automáticamente, podemos usar el atributo de reproducción automática.

Ejemplo: Este ejemplo ilustra el uso del atributo de reproducción automática en la etiqueta HTML <video>.

HTML

<!DOCTYPE html>
<html>
<body>
     
 
 
<p>Adding Video on my webpage</p>
 
 
 
 
    <video width="400"
           height="350"
           autoplay>
        <source src="myvid.mp4" type="video/mp4">
        <source src="myvid.ogg" type="video/ogg">
    </video>
</body>
</html>

Producción:

Atributo de reproducción automática

Consulte la sección ¿Cómo mostrar controles de video en HTML5? artículo para conocer en detalle los distintos controles disponibles.

Video HTML usando JavaScript: se pueden configurar muchas propiedades y eventos para un video, como cargar, reproducir y pausar videos, así como configurar la duración y el volumen.

Ejemplo: En este ejemplo, hemos usado Javascript para reproducir, pausar y configurar el volumen y la duración del video en HTML.

HTML

<!DOCTYPE html>
<html>
<body>
    <div style="text-align:center">
        <button onclick="Pauseplay()">Pause/Play</button>
        <button onclick="Big()">Big</button>
        <button onclick="Small()">Small</button>
        <button onclick="Normal()">Normal</button>
        <br>
        <video id="myvideo" width="450">
            <source src="myvid.MP4"
                    type="video/mp4">
            <source src="myvid.ogg"
                    type="video/ogg">
        </video>
    </div>
    <script>
        var testvideo = document.getElementById("myvideo");
 
        function Pauseplay() {
            if(testvideo.paused) testvideo.play();
            else testvideo.pause();
        }
 
        function Big() {
            testvideo.width = 600;
        }
 
        function Small() {
            testvideo.width = 300;
        }
 
        function Normal() {
            testvideo.width = 450;
        }
    </script>
</body>
</html>

Producción:

Configuración de los diversos controles de video usando los eventos y propiedades de Javascript en HTML

Navegadores compatibles:

Google Chrome 3 y superior
Internet Explorer 9 y superior
Microsoft Edge 12 y superior
Firefox 3.5 y superior
Ópera 10.5 y superior
Safari 3.1 y superior

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

Navegador

MP4

WebM

OGG

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta