0

Hola estaba siguiendo un tutorial pero la barra de progreso no me aparece, estos son las hojas de trabajo, en la funcion "cliclando" donde puse "bucle = setInterval(estado, 1000); " es donde se deberia ir mostrando la barra de progreso del video pero no pasa nada.

RESUELTO, falta un "=" en la linea function estado(){ if(mivideo.ended=false)....

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Eventos en html5 con js</title>

    <link rel="stylesheet" type="text/css" href="18aspecto_videos.css">
    <script src="18funcionalidad_barra.js"></script>
</head>
<body>
    <!--MANERA MAS OPTIMA PARA PONER LOS VIDEOS-->
    <section id="video">
        <video id="mivideo" width="720" loop> 
            <source src="videos/17video-2012-04-05-14-22-32.mp4">
            <source src="videos/17video-2012-04-05-14-22-32.ogg">
        </video>

        <nav> <!--especifican barras de navegacion y controloes de navegacion para un video-->
            <div id="botones">
                <button type="button" id="reproducir">play</button>
            </div>

            <div id ="barra">
                <div id="progreso">

                </div>
            </div>
        </nav>
    </section>

</body>
</html>

CSS

#video{
    width: 720px;
    margin: :20px auto;
    background: #FC3;
    padding: 5px;
    border: 2px solid #F60;

    -moz- border-radius: 8px; /* para mejorar la compatiblidad*/
    -webkit- border-radius: 8px;
    border-radius: 8px;
}

nav{
    margin: 5px 0;
}

#botones{
    float:left;
    width: 100px;
    height: 20px;
}

#barra{
    background: #FFF;
    width: 600px;
    height: 16px;
    border:1px solid #666;
    padding: 3px;
    margin-left: 80px;
}

#progreso{
    position: absolute; /*lo dejara a la izq de donde se encuentra ahora*/
    width: 0px;
    height: 16px;
    background: rgba(0,0,150,2);
}

JS

var mivideo, reproducir, barra, progreso,maximo;
maximo = 600; /*definí que la barra de carga tendria un ancho de 600 px por eso digo que max es de 600*/

function comenzar(){
    mivideo=document.getElementById("mivideo"); /*hago referencia desde js a las vriables y que sepa que nos referimos a los elementos del codigo html (las que estan entre '')*/
    reproducir=document.getElementById("reproducir");
    barra=document.getElementById("barra");
    progreso=document.getElementById("progreso");

    reproducir.addEventListener("click",clicando,false);

    progreso.addEventListener("click",adelantando,false);
}

function clicando(){
    if((mivideo.paused==false) && (mivideo.ended==false)){ /*si esta reproduciendo*/
        mivideo.pause();
        reproducir.innerHTML="Play"; /*cambia el texto del boton cuando este pausado*/
    }
    else{ /*si esta pausado o esta finalizado*/
        mivideo.play();
        reproducir.innerHTML="Pause"; /*cambia el texto del boton cuando este reproduciendo*/

        bucle = setInterval(estado, 1000); 
    }
}


function adelantando(){

}

function estado(){
    if(mivideo.ended=false)
    {
        var total = parseInt(mivideo.currentTime*maximo/mivideo.duration); 
        progreso.style.width =total+"px"; 
    }
}

window.addEventListener("load",comenzar,false);
8
  • Te saca algún error en Consola ? el 23 nov. 2017 a las 1:47
  • qué consola :| ? (uso sublime text para escribir el codigo solamente) no no me da ningun error simplemente la barra de carga del video no funciona el 23 nov. 2017 a las 1:48
  • Clic derecho en la página, clic en inspeccionar, luego clic en console y ahí te salen todos los posibles errores que puedas tener en tu javascript, realiza los pasos y me dices si sale algún error el 23 nov. 2017 a las 1:50
  • @CamiloVasquez Sale en blanco amigo, creo que no hay error el 23 nov. 2017 a las 1:53
  • No hay errores tienes razón, cambia esto progreso.style.width =total+"px"; por esto progreso.style.width += total+"px"; el 23 nov. 2017 a las 2:04

1 respuesta 1

1

Tu error básicamente se encuentra en la siguiente línea:

if(mivideo.ended=false)

Como estás haciendo una condición debes utilizar un operador de comparación y no un operador de asignación, recuerda:

Un igual = es un operador de asignación

Dos == o tres iguales === son operadores de comparación

Teniendo esto en cuenta la sintaxis de tu if debería de ser la siguiente:

if(mivideo.ended==false)
3
  • gracias!! funcionando. el 23 nov. 2017 a las 2:26
  • Te invito a que te hagas el recorrido de bienvenida para que termines de entender el funcionamiento básico del sitio, saludos ! el 23 nov. 2017 a las 2:29
  • @CamiloVasquez Hola :) puedes analizar mi pregunta sí... Saludos!
    – So12
    el 23 nov. 2017 a las 2:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.