Codigo avanzado para reproducir videos en tu Web.

[hackmastter]

Hola de nuevo.!!! 

Esta vez quiero preguntar, acerca de las maneras de introducir videos en tu Web (HTML5, javascript o con lo que sea que sea  )

Tengo un codigo para reproducirlos con HTML5, pero este es el código básico:

Código [Seleccionar] Expandir

<video src="http://localhost/Video/video.mp4" poster="http://localhost/Img/Psj/Psj1.jpg" controls width="400" height="400"></video>

Pero hay ciertas páginas que hacen esto de maneras muy diferentes las unas de las otras. Unas son muy eficientes a la hora de reproducir un video (digamos de 240p)
pero otras son "poco eficientes" (para no decir mas) reproduciendo un video de la misma calidad.
Otra cosa también, es que algunos videos se pueden parar retroceder adelantar y si ya cargaron esto se puede hacer de manera simple (como en un reproductor en tu PC) pero ahi otras que no importa que todo el video ya este cargado, si clickeas para retrocederlo todo lo que ya había cargado desaparecerá y comenzará de nuevo desde donde lo clickaste y si estas de suerte, esta posibilidad de saltar por el video ni siquiera existe. 

Les dejaré dos páginas de ejemplo:

http://series.anime-latino.net/anime/dr-house.html
http://www.repelis.tv/7926/pelicula/three-kings.html

En la primera seleccionen cualquier capitulos, esperen dos minutos y verán todo el video sin problemas aun con una conexión a internet mediocre (como la mía  ). Aunque si mal no recuerdo, no podrán adelantar a una parte del video a menos que esta ya haya cargado.

Pero en la segunda, hagan play (y esperen a que termine el anuncio  ) después que termine hagan play para ver el video. Suponiendo que tengan paciencia para esperar, se darán cuenta de que no es lo mismo... 

[engel lex]

esos 2 son reproductores flash... la velocidad del video dependerá de la velocidad del servidor, la calidad del video y formato, algunos formatos son mucho más ligeros que otros...

al final no se que es lo que querías saber XD

[hackmastter]

Entiendo.

Pero diganme mas o menos como de utiliza Flash Player (Denme una idea para saber por donde empezar  ) o pasenme algún tutorial bueno que tengan 

Muchas Gracias...

[engel lex]

aunque sea intentaste

https://www.google.com/search?q=reproductor+video+flash+para+web

[Usuario Invitado]

Como recomendación personal, no uses flash, usa la nueva API Video de HTML5. Es innecesario flash para reproducir videos si ahora lo podemos hacer nativamente con HTML5 y sin consumir un elevado porcentaje de recursos como flash. Como te dijo @engel lex, el tiempo de respuesta dependerá de la conexión entre tú y el servidor en donde esté alojado el vídeo. La API Video de HTML5, es muy práctica y relativamente sencilla de aprender.

Yo suelo crear el reproductor con HTML5 y CSS y luego cargo en un array todos los archivos media (en Desarrollo Web dejé un reproductor MP3 que hace uso de la nueva API Audio de HTML5 que puedes ver para tomarlo como case study). Una vez que tenemos el array con los audios o vídeos, podemos manejar dichos objetos para realizar los procesos que queramos: retroceder, reproducir, pausar, avanzar, repetir, etc.

[engel lex]

Gus Garsaky hasta donde se el reproductor en html5 no te deja manejar a bajo nivel el video, así que es complicado hacer ciertas operaciones de bajo nivel y dependes del comportamiento del navegador para momentos como saltar a otra zona del video y cosas así... hay detallitos que me hacen queer que a video y audio de html5 les falta mucho... si me equivoco en lo que acabo de decir, por favor corrígeme porque estaría interesado 

[EFEX]

Nunca me toco trabajar con video si flash, html5 video o alguna libreria js. Pero buscando algunos ejemplos..

http://stackoverflow.com/a/18624833
https://people.mozilla.org/~cpearce/buffered-demo.html
http://www.w3.org/2010/05/video/mediaevents.html
http://www.w3.org/TR/html5/embedded-content-0.html#dom-mediacontroller-buffered

[engel lex]

lo ejemplos están interesantes, especialmente con respecto al buffer

[Usuario Invitado]

@engel lex Audio y Video tienen una propiedad llamada currentTime que te devuelve el tiempo actual de reproducción y si le asignas un valor (en segundos) salta a dicho tiempo.

En mi reproductor lo hice así:

• Obtienes el offsetWidth del playhead (la barra de progreso).
  
• Obtienes la coordenada X del click en el playhead y le restas el offsetLeft del playhead.
  
• Devuelves la division del resultado anterior y el offsetWidth del playhead. Esto devuelve el % del playhead donde se ha clickeado en rango 0 a 1, donde 1 es 100%.
  
• Le asignas a la propiedad currentTime del objeto Video el resultado de la duracion del vídeo * el resultado anterior.
  Por ejemplo, se ha ckickeado en el 40% del playhead lo que retorna 0.4. La duración del vídeo es de 600 segundos. 600 * 0.4 = 240. Por lo que salta al segundo 240.
  
  Ejemplo:
  
  Función getPlayheadClickPercent():
  
  
  Código (javascript) [Seleccionar] Expandir
  
var playhead = document.querySelector(".playhead");
var playheadWidth = playhead.offsetWidth;
var clickOffsetLeft = e.pageX - playhead.offsetLeft;
return clickOffsetLeft / playheadWidth;
  
  Luego actualizamos el transcurso actual del vídeo:
  
  
  Código (javascript) [Seleccionar] Expandir
  
var video = videosList[currentVideo];
var duration = video.duration;
var playheadClickPercent = getPlayheadClickPercent();
video.currentTime = duration * playheadClickPercent;
  
  Pueden ver la documentación de Video aquí.
  
  Sencillo como puedes ver. Cualquier error ortográfico me disculpan, estoy escribiendo desde móvil con Opera mini
  
  Saludos.