¡Hola! En este artículo vamos a aprender cómo agregar un elemento de video a una página HTML usando JavaScript.
Para crear un elemento de video:
- Usaremos el método
document.createElement()para crear un elementovideo. - Establecemos el atributo
srcdel elemento con la ruta al archivo de video, ya sea local o remoto. - Agregamos el elemento a la página usando el método
appendChild().
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>Código JavaScript
// Crear el elemento video
const video = document.createElement('video');
// Archivo local (no funciona en este ejemplo)
// video.src = 'video.mp4';
// Archivo remoto
video.src =
'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4';
// Establecer un póster para el video
video.poster =
'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217';
// Desactivar la reproducción automática
video.autoplay = false;
// Habilitar los controles
video.controls = true;
// El sonido está activado
video.muted = false;
// Establecer la altura del video en píxeles
video.height = 240; // en píxeles
// Establecer el ancho del video en píxeles
video.width = 320; // en píxeles
// Obtener el elemento con el id 'box'
const box = document.getElementById('box');
// Agregar el elemento video al contenedor 'box'
box.appendChild(video);
De esta manera, hemos agregado un nuevo elemento video a la página HTML usando JavaScript y el DOM.
See the Pen Video-JS by Alex (@htmldesdecero) on CodePen.
