Barra de volumen y barra de video progreso video en AR.js

¡Hola aumentados! Sean todos bienvenidos a este nuevo video tutorial de realidad aumentada (Augmented Reality) donde vamos a aprender a agregar un control de volumen y una barra de progreso de video. En nuestro anterior videotutorial aprendimos a agregar botones a nuestra aplicación. Aquí está el link por si no lo has visto https://blog.realidad-aumentada.com.co/como-agregar-botones-a-nuestra-aplicacion-de-realidad-aumentada-en-ar-js/

Vamos a trabajar con la librería de realidad aumentada AR.js y AFrame. Les recuerdo que este tutorial solo funciona para computadores de mesa (desktop) debido a un problema existente con input type=»range» pero si le das mucho amor a este tutorial con un super like y compartiéndolo con mucho gusto publicare un nuevo tutorial utilizando en Android y iOS.

Agregar controles de volumen y barra de progreso en tu WebAR usando AR.js

Inicialmente trabajamos con el mismo código del tutorial anterior (como agregar botones a nuestra aplicación de realidad aumentada en AR.js) pero vamos a agregar unas pocas lineas de código que las pondré a continuación:

Explicación: Estas lineas de codigo nos permiten darle estilo html5 y css3 a nuestro input type range

input[type=»range»]::-moz-range-progress {background-color: red;}
input[type=»range»]::-moz-range-track {background-color:white;}
input[type=»range»] {
outline: 0;
border: 0;
border-radius: 500px;
width: 100px;
max-width: 100%;
margin: 4px02px;
background-color:black;
}
Recuerden solo es el estilo. Luego agregaremos el texto (label) y lo asignaremos a su respectivo input type range

Creamos el label y le asignamos la palabra volumen y este su vez esta relacionado con el tipo de input que nos permite modificar el volumen de nuestro video.

<label for=»Palabravolumen»>Volumen</label>
<inputid=»Palabravolumen»type=»range»min=»0″max=»100″step=»1″oninput=»SetVolume(this.value)»onchange=»SetVolume(this.value)»></input>

Creamos el label y asignamos la palabra Avance y este a su esta relacionado con el tipo de inputo que nos permite modificar la barra de progreso de nuestro video.

<labelfor=»Palabraavance»>Avance</label>
<inputclass=»seekbar»id=»Palabraavance»type=»range»min=»0″max=»100″></input>

Ahora bien empezamos a crear nuestro script de javascript dentro de Ar.js y Aframe.

Esta seccion de codigo nos permite utilizar y modificar el volumen. Este script esta relacionado con el label volumen y su respectivo input

window.SetVolume = function(val){ varplayer = document.getElementById(‘mivideo’); player.volume = val / 100;}

Esta seccion de codigo nos permite utilizar la barra de progreso de nuestro video en realidad aumentada. Este script esta relacionado con el label Avance y su respectivo inpu.

const video = document.querySelector(‘#mivideo’) const seekbar = document.querySelector(‘.seekbar’)video.addEventListener(‘timeupdate’, () => {seekbar.value = video.currentTime / video.duration * seekbar.max}) seekbar.addEventListener(‘change’, () => { video.currentTime = video.duration * seekbar.value / seekbar.max})

Si tienes problemas con el código para copiarlo y pegarlo desde aquí, puedes descargarlo desde aquí.

DESCARGAR CODIGO

AQUI EL VIDEO TUTORIAL EN YOUTUBE! RECUERDA SUSCRIBIRTE AL CANAL

⭐ Guía recomendada

Este tutorial forma parte de la Guía Definitiva de WebAR.

Si quieres entender cómo funciona la realidad aumentada en la web y qué frameworks utilizar, revisa la guía completa:

👉 Guía Definitiva de WebAR en 2026

Agregando control de volumen y barra de progreso de video en realidad aumentada

Agregar controles de volumen y barra de progreso en tu WebAR usando AR.js

Explicación: Estas lineas de codigo nos permiten darle estilo html5 y css3 a nuestro input type range

1 comentario en “Agregando control de volumen y barra de progreso de video en realidad aumentada”

Deja un comentario Cancelar respuesta