javascript - descargar - Establecer videoElement.currentTime en Hulu video player no funciona, y rompe el reproductor

hulu movies

Question

Tengo una extensión de Chrome en la que estoy intentando avanzar o retroceder (según el comando de un usuario) a una hora específica del video estableciendo la propiedad currentTime del objeto de video. Antes de intentar establecer currentTime , una variedad de operaciones funcionan bien. Por ejemplo:

document.getElementsByTagName("video")[1].play(); // works fine
document.getElementsByTagName("video")[1].pause(); // works fine
document.getElementsByTagName("video")[1].muted = true; // works fine
document.getElementsByTagName("video")[1].muted = false; // works fine

PERO tan pronto como trato de saltar a un punto específico en el video haciendo algo como esto:

document.getElementsByTagName("video")[1].currentTime = 500; // doesn''t work

No se generan errores, el video se detiene, y cualquier intento de acciones después de este punto no hace nada. Por lo tanto, los elementos que se muestran arriba (reproducir / pausar / silenciar / activar sonido) ya no funcionan después de intentar establecer el tiempo currentTime . Si leo el valor de currentTime después de configurarlo, muestra correctamente la nueva hora en la que la configuré. Sin embargo, nada de lo que hago lo hará funcionar, y de hecho, incluso intentar hacer que el video se reproduzca haciendo clic en la barra de herramientas integrada ya no funciona. Entonces, al parecer, la configuración de CurrentTime causa todo tipo de estragos en el reproductor de video. Sin embargo, si vuelvo a cargar el video, todo funciona igual que antes, siempre que no intente configurar el tiempo actual.

Puedo saltar fácilmente varias veces (hacia atrás o hacia adelante) deslizando el control deslizante en la barra de herramientas, por lo que debe haber una manera interna de hacerlo. ¿Hay alguna forma en que pueda descubrir qué código salta un tiempo exitoso? Debido a que es una extensión de Chrome, puedo inyectar js personalizados en Hulu js en ejecución, pero no sé qué comando enviaré.

¿Algunas ideas?

Answer 1

En lugar de tratar de encontrar el javascript responsable de cambiar la hora, ¿por qué no intentar simular los eventos del usuario que provocan el cambio de hora?

Calcule la secuencia exacta de los eventos del mouse que activan el cambio de hora. Esta es probablemente una combinación de mouseover, mousedown, mouseup y click.

Luego recrear esos eventos sintéticamente y enviarlos a los elementos apropiados.

Este es el enfoque adoptado por extensiones como Stream Keys y Vimium .

Answer 2

De acuerdo, jugueteé con él por un tiempo para ver cómo podía reproducir el evento click en el reproductor y obtuve la siguiente solución:

handleViewer = function(){
    var thumbnailMarker = $(''.thumbnail-marker''),
        progressBarTotal = thumbnailMarker.parent(),
        controlsBar = $(''.controls-bar''),
        videoPlayer = $(''#content-video-player'');

    var init = function(){
            thumbnailMarker = $(''.thumbnail-marker'');
            progressBarTotal = thumbnailMarker.parent();
            controlsBar = $(''.controls-bar'');
            videoPlayer = $(''#content-video-player'');
    },
    check = function(){
        if(!thumbnailMarker || !thumbnailMarker.length){
            init();
        }
    },
    show = function(){
            thumbnailMarker.show();
            progressBarTotal.show();
            controlsBar.show();
    },
    hide = function(){
        controlsBar.hide();
    },
    getProgressBarWidth = function(){
        return progressBarTotal[0].offsetWidth;
    };

    return {
        goToTime: function(time){
            var seekPercentage, 
            duration;
            check();
            duration = videoPlayer[0].duration;
            if(time > 0 && time < duration){
                seekPercentage = time/duration;
                this.jumpToPercentage(seekPercentage);
            }

        },
        jumpToPercentage: function(percentage){
            check();
            if(percentage >= 1 && percentage <= 100){
                percentage = percentage/100;
            }
            if(percentage >= 0 && percentage < 1){
                show();
                thumbnailMarker[0].style.left = (getProgressBarWidth()*percentage)+"px";
                thumbnailMarker[0].click();
                hide();
            }
        }
    }
}();

Una vez que el código se inicializa, puede hacer lo siguiente:

handleViewer.goToTime(500);

Alternativamente

handleViewer.jumpToPercentage(50);

He probado esto en Chrome en un MacBook Pro. Avísame si te encuentras con algún problema.

Answer 3

El video debe estar listo para jugar antes de configurar el Tiempo actual.

Intenta agregar esta línea antes de configurar currentTime?

document.getElementsByTagName("video")[1].play(); document.getElementsByTagName("video")[1].currentTime = 500;