2012-03-23 25 views
11

Me gustaría mostrar un pequeño clip de un archivo de video largo que dura más de 10 minutos. Este segmento de video comenzaría en el tiempo de compensación/tiempo de búsqueda de 90 segundos y tendría una duración de 45 segundos. Cómo puedo hacer eso ?En video HTML5, ¿cómo reproducir un pequeño clip de un video largo?

+0

Tenga en cuenta que de esta manera transferirá todo el video (que puede ser bastante grande en términos de tamaño del archivo) al dispositivo de su cliente. Un enfoque fácil de usar probablemente resolvería esto en la edición y proporcionar un archivo específico que solo cubra el fragmento. – m90

Respuesta

9

Phillip Brown tiene razón. puedes resolver esto controlando tu html-player a través de js. por ejemplo, en este caso, el video podría iniciarse automáticamente y se reproducirá el archivo de vídeo debe 00: 10min a 00: 40min

<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already 
    <source src="test.mp4" type="video/mp4" /> 
    <source src="test.ogv" type="video/ogg" /> 
    This browser is not compatible with HTML 5 
</video> 

<script type="text/javascript"> 
    window.onload = playVideoTeaserFrom(10,40); //this event will call the function after page was loaded 

    function playVideoTeaserFrom (startTime, endTime) { 
     var videoplayer = document.getElementById("yourVideoplayer"); //get your videoplayer 

     videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds 
     videoplayer.play(); 

     //call function to stop player after given intervall 
     var stopVideoAfter = (endTime - startTime) * 1000; //* 1000, because Timer is in ms 
     setTimeout(function(){ 
      videoplayer.stop(); 
     }, stopVideoAfter); 

    } 
</script> 

que puede haber algunos errores en ella, pero supongo que obtendrá el punto

+0

Esta función no parece funcionar. El video normalmente se ejecuta en toda su extensión. – imbenzene

+0

Eso es porque @longilong establece 'window.onload' en undefined, y otros problemas con el código. Hay errores obvios. – Sam

+0

Si el usuario avanza o rebobina rápidamente con el mouse, el cronómetro se detendrá en un momento determinado diferente al esperado. – jRam90

29

El video HTML5 también admite la especificación Media Fragment URI. Esto le permitirá especificar solo un segmento del video para jugar. El uso es bastante trivial:

<source src="video.mp4#t=30,45" type="video/mp4"/> 

comenzará el video en la marca de 30 segundos y pausa en el vídeo en la segunda marca de 45.

+2

Solo una nota que noté que Chrome continúa descargando el resto del video. Pausa el video en 45 segundos, pero un usuario puede reanudar el juego desde ese punto. Si está viendo esto como un medio para limitar el tráfico o cortar el resto del video, esta no es su solución. – villecoder

+0

Deberá trabajar con los controles del reproductor de video para evitar esto. Puede hacer que el reproductor de video regrese a 30 segundos en el video si se presiona el botón Reproducir cuando el video está en la marca de los 45 segundos. Sería bastante trivial analizar los fragmentos de los medios del src para crear ese tipo de funcionalidad. –

+0

Si esto es ampliamente compatible en todos los principales navegadores, entonces debería ser la respuesta aceptada. – TimHayes