Reproductor de video HTML5 impide buscar

Estoy creando una serie de videos tutoriales y me gustaría evitar que los usuarios busquen hacia adelante y salten secciones. Utilizaré un reproductor de video HTML5 que se utilizará para los navegadores de escritorio y iPad. Idealmente, me gustaría que esto funcione en el iPhone también, pero me doy cuenta de que no tiene control sobre el video en el teléfono ya que usa el reproductor de video del iPhone.Reproductor de video HTML5 impide buscar

¿Cómo puedo evitar que los usuarios busquen un reproductor de video HTML5?

Fuente

2010-10-22 jaysonp

* "impedir que los usuarios busquen hacia adelante" *: una mala idea, IMO. ¿Qué sucede si un usuario ve la mitad, cierra su navegador y luego quiere ver la segunda mitad? S/Él se verá obligado a mirar la primera parte de nuevo. –

Tengo la intención de colocar puntos de control a lo largo del video que guardarán el progreso de un usuario en un DB mientras se reproduce el video. Si el usuario regresa a la página, comenzará desde su último punto de control. Los videos durarán entre 2 y 5 minutos. Me doy cuenta de que no es una buena idea eliminar la capacidad de buscar, aunque el proyecto requiere que el usuario vea el video completo antes de que pueda pasar al siguiente tutorial. Claro, la gente puede ver> fuente y descargarla, pero el tutorial es para enseñarles una habilidad requerida que es un requisito previo para el próximo tutorial. – jaysonp

Bueno, puedo pensar en un ejemplo que te obliga a ver todo el video: cursos de conducción en línea ... todo el tiempo, aunque hayas terminado de leer el texto o el video, no te permitirán pasar a la siguiente sección. Eso apesta. Pero tenían que seguir los requisitos establecidos por la ley. – netrox

Si realmente desea hacer esto increíblemente hostil al usuario, entonces puede hacer uso del atributo controls. Tendrá que implementar los controles que quiera permitir con JS.

Por supuesto, el usuario siempre puede simplemente ver> fuente para obtener el URI del video y descargarlo.

Fuente

2010-10-23 19:32:52 Quentin

Mismo problema con el comentario de casablanca anterior. Esta no es una respuesta útil. – Carnix

Enlace muerto para esta respuesta – Antoine

Estoy de acuerdo con @Bart Kiers en que esta no es una muy buena idea, pero si debe hacerlo, puedo pensar de una manera: ocultar los controles y proporcionar su propio botón de reproducción que inicie el video usando JavaScript.

Fuente

2010-10-23 19:33:24 casablanca

Un uso que se me ocurre es el anuncio de video Pre-Rolls, a los anunciantes no les gusta pagar por algo que puede omitir. – SimonGates

No estaba realmente preguntando si esta era una * buena * idea. Hay muchos casos de uso en los que un usuario no debería poder adelantarse. En particular, un sistema de TCC sería un buen ejemplo. -1 – Carnix

Solo quería evitar la búsqueda de futuro. Tengo más código en mi sistema que les permite pausar y volver más tarde. Registra la posición actual y establece la posición del video en la carga.

Estoy usando video.js. Traté de usar el evento timechange, pero se dispara antes de buscar. Entonces, recurrí al uso de un intervalo para tomar la posición actual cada segundo. Si la posición de búsqueda es mayor que la posición actual, vuelva a establecerla. Funciona genial.

var player = null; 
var curpos = 0; 
videojs("player").ready(function(){ 
    player = this; 
}); 

player.on('seeking', function() { 
    var ct = player.currentTime(); 
if(ct > curpos) { 
    player.currentTime(curpos); 
} 
}); 

function getpos() { 
    curpos = player.currentTime(); 
} 
onesecond = setInterval('getpos()', 1000);

Fuente

2014-01-16 16:37:10

Al final, no estoy seguro si esto es algo de jQuery o no, pero tuve que reemplazar 'setInterval ('getpos()', 1000)' con 'setInterval (getpos, 1000)' para que funcione. Gran fragmento, gracias! – jporcenaluk

Gracias por su respuesta Rick.

Me di cuenta de que el usuario puede arrastrar y mantener el buscador que les permitió continuar, así que agregué dónde no buscar la función getPos. HTML 5 y jQuery.

var video = document.getElementsByTagName('video')[0]; 
 

 
function allowMove() { 
 
    $('input[id$="btnNext"]').removeAttr('disabled'); 
 
    $('input[id$="videoFlag"]').val("1"); 
 
} 
 

 
function getpos() { 
 
    if (!(video.seeking)) { 
 
    curpos = video.currentTime; 
 
    } 
 
    console.log(curpos) 
 
} 
 
onesecond = setInterval('getpos()', 1000); 
 

 
function setPos() { 
 
    var ct = video.currentTime; 
 
    if (ct > curpos) { 
 
    video.currentTime = curpos; 
 
    } 
 
}

Fuente

2015-06-02 13:50:08 user3426396

Otro ejemplo de Video.js:

videojs('example_video_1').ready(function(){ 
    var player = this; 
    var previousTime = 0; 
    var currentTime = 0; 
    var seekStart = null; 

    player.on('timeupdate', function(){ 
    previousTime = currentTime; 
    currentTime = player.currentTime(); 
    }); 

    player.on('seeking', function(){ 
    if(seekStart === null) { 
     seekStart = previousTime; 
    } 
    }); 

    player.on('seeked', function() { 
    if(currentTime > seekStart) { 
     player.currentTime(seekStart); 
    } 
    seekStart = null; 
    }); 
});

Fuente

2015-06-08 19:50:34

¡Funciona a la perfección! – Tomjr260

Por qué no de esta manera?

var video = document.getElementById("myVideo"); 
var counter = 0; 

video.on('timeupdate', function() { 
    if (video[0].paused == false) { 
    counter = video[0].currentTime; 
    } 
} 

video.on('seeking', function(e) { 
    if (parseInt(counter, 10) != parseInt(video[0].currentTime, 10)) { 
    video[0].currentTime = counter; 
    } 
});

Fuente

2017-06-24 09:18:50 Bnoss

Reproductor de video HTML5 impide buscar

Respuesta

Cuestiones relacionadas