HTML 5 Video, Streaming/Buffering solo una cierta porción de un video más largo

Question

Tenemos una larga pieza de video, de hasta 1 hora de duración. Queremos mostrar a los usuarios fragmentos pequeños de 30 segundos de este video. Es imperativo que el video no tartamudee en ningún momento.

El usuario no puede luego salta alrededor del resto del video, solo ven el trozo de 30 segundos.

Un ejemplo sería un partido de fútbol, ​​todo el partido está en video, pero al hacer clic en un botón de otra página se carga el video completo y se juega solo un gol.

¿Es esto posible con HTML5 Video? ¿Tendría algo que ver con TimeRanges? ¿El video debe ser servido sobre un protocolo de transmisión pura? ¿Podemos almacenar el trozo completo de 30 segundos antes de reproducirlo?

El objetivo es reducir el flujo de trabajo necesario para recortar todos los pequeños clips (y el tiempo de transcodificación a todos los diferentes formatos de video HTML 5), podemos arrojar un fragmento de video transcodificado y enviar al usuario a una sección de ese metraje.

¡Sus ideas y opiniones son bienvenidas, gracias!

Answer 1

En este punto en el tiempo de vídeos HTML5 son un verdadero PITA - tenemos ninguna API real para controlar el almacenamiento temporal del navegador, por lo tanto, tienden a tartamudear en conexiones más lentas, como los navegadores tratan de amortiguar de forma inteligente, pero por lo general haz todo lo contrario.

Además, si solo desea que sus usuarios vean un trozo particular de 30 segundos de un video (supongo que sería su forma de obligar a los usuarios a registrarse para ver los videos completos), HTML5 no es la elección correcta. sería increíblemente simple abusar de su sistema.

Lo que realmente necesita en este caso es un reproductor de Flash decente y un servidor de medios en el back-end: esto es cuando tiene el control total.

Answer 2

Podrías hacer algo de esto, pero entonces estarías sujeto al buffer del navegador. (Tampoco puede detener el almacenamiento en búfer más allá de X seg) Mejor puesto, podría tener fácilmente un control de búsqueda personalizado para restringir los rangos y detener el video cuando llegue al fragmento de 30 segundos.

Además, el almacenamiento en búfer no es algo que pueda controlar, sino que le indica al navegador que no lo haga. El resto es automático y se ha eliminado la compatibilidad para forzar que se haya eliminado un búfer completo de las especificaciones.

De todos modos, solo le informamos que esta es una práctica terrible y podría hacerse, pero es probable que se encuentre con muchos problemas. Siempre puede usar un servicio como Zencoder para ayudar a manejar la transcodificación también. Otra alternativa sería tener ffmpeg u otro software en el servidor para manejar el recorte y la transcodificación.

Answer 3

Puede establecer la hora usando javascript (la propiedad currentTime del video).

En caso de que quiera una costumbre seekbar que puede hacer algo como esto:

<input type="range" step="any" id="seekbar"> 

var seekbar = document.getElementById('seekbar'); 
function setupSeekbar() { 
seekbar.max = video.duration; 
} 
video.ondurationchange = setupSeekbar; 
function seekVideo() { 
    video.currentTime = seekbar.value; 
} 
function updateUI() { 
    seekbar.value = video.currentTime; 
} 
seekbar.onchange = seekVideo; 
video.ontimeupdate = updateUI; 

function setupSeekbar() { 
    seekbar.min = video.startTime; 
    seekbar.max = video.startTime + video.duration; 
} 

Si el vídeo se está transmitiendo tendrá que "calcular" el tiempo "fin".

var lastBuffered = video.buffered.end(video.buffered.length-1); 
function updateUI() { 
    var lastBuffered = video.buffered.end(video.buffered.length-1); 
    seekbar.min = video.startTime; 
    seekbar.max = lastBuffered; 
    seekbar.value = video.currentTime; 
}