El objeto Video en HTML DOM representa un elemento <video> . Se puede acceder al elemento de video usando el método getElementById() .
Sintaxis:
- Para acceder a un objeto de vídeo:
document.getElementById("videoId");
- donde id se asigna a la etiqueta <video>.
- Para crear un objeto de vídeo:
document.createElement("VIDEO");
Valores de propiedad:
| Valor | Descripción |
|---|---|
| pistas de audio | Devuelve un objeto AudioTrackList que representa las pistas de audio disponibles. |
| auto-reproducción | Se utiliza para establecer o regresar si el video debe comenzar a reproducirse tan pronto como esté listo. |
| amortiguado | Devuelve el objeto TimeRanges que representa las partes almacenadas en búfer de un video. |
| controlador | Devuelve el objeto MediaController que representa el controlador de medios actual de un video. |
| control S | Se utiliza para establecer o devolver si un video debe tener controles de reproducción y pausa para mostrarse. |
| origencruz | Establece o devuelve la configuración CORS de un video. |
| fuente actual | Devuelve la URL del vídeo actual. |
| tiempo actual | Establece o devuelve la posición de reproducción actual en un video. |
| por defecto silenciado | Establece o devuelve si el video debe silenciarse de forma predeterminada. |
| tasa de reproducción predeterminada | Establece o devuelve si la velocidad de reproducción predeterminada del video. |
| duración | Devuelve la duración de un vídeo. |
| terminó | Se utiliza para devolver si la reproducción del vídeo ha finalizado. |
| error | Devuelve un objeto MediaError que representa el estado de error del video. |
| altura | Se utiliza para establecer o devolver el valor del atributo de altura de un video. |
| círculo | Se usa para establecer o regresar si el video debe comenzar a reproducirse nuevamente, cada vez que finaliza |
| grupo de medios/td> | Se utiliza para establecer o devolver el nombre del grupo de medios de ese video. |
| apagado | Se utiliza para establecer o devolver si se debe apagar el sonido del video. |
| estado de la red | Devuelve el estado actual de la red de un video. |
| en pausa | Devuelve si un video está en pausa o no. |
| tasa de reproducción | Se utiliza para establecer o devolver la velocidad de reproducción del video. |
| jugó | Devuelve un objeto TimeRanges que representa las partes reproducidas del video. |
| póster | Se utiliza para establecer o devolver el valor del atributo de póster de un video. |
| precarga | Se utiliza para establecer o devolver el valor del atributo de precarga de un video. |
| listoestado | Se utiliza para devolver el estado listo actual de un video. |
| buscable | Se utiliza para devolver el objeto TimeRanges que representa las partes buscables de un video. |
| buscando | Devuelve si el usuario está buscando actualmente en el video. |
| origen | Se utiliza para establecer o devolver el valor del atributo src de un video. |
| fecha de inicio | Se utiliza para establecer o devolver el valor del atributo src de un video. |
| pistas de texto | Se utiliza para devolver el objeto TextTrackList que representa las pistas de texto disponibles. |
| videopistas | Se utiliza para devolver el objeto VideoTrackList que representa las pistas de vídeo disponibles. |
| volumen | Se utiliza para establecer o devolver el volumen de audio de un video. |
| ancho | Se utiliza para establecer o devolver el valor del atributo de ancho de un video. |
Métodos de objeto de video:
- pausa: se utiliza para pausar el video que se está reproduciendo actualmente.
- cargar: Se utiliza para recargar el elemento de video.
- play: Se utiliza para comenzar a reproducir el video.
- addTextTrack: Se utiliza para agregar una nueva pista de texto al video.
- canPlayType: se utiliza para comprobar si el navegador puede reproducir el tipo de vídeo especificado.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Video Object
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Video Object</h2>
<video id="gfg"
width="320"
height="240"
controls>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4"
type="video/mp4">
</video>
<br>
<button type="button" onclick="geeks()">
Click
</button>
<p id="rk"></p>
<script>
function geeks() {
// get the duration of video
var r =
document.getElementById(
"gfg").duration;
document.getElementById(
"rk").innerHTML = r;
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Video Object
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Video Object</h2>
<video id="gfg"
width="320"
height="240"
controls>
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4"
type="video/mp4">
</video>
<br>
<button type="button" onclick="geeks()">
Click
</button>
<p id="rk"></p>
<script>
function geeks() {
// Return width
var r =
document.getElementById(
"gfg").width;
document.getElementById(
"rk").innerHTML = r;
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: El navegador compatible con HTML | Los objetos de video DOM se enumeran a continuación:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA