elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Codigo avanzado para reproducir videos en tu Web.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Codigo avanzado para reproducir videos en tu Web.  (Leído 4,146 veces)
hackmastter

Desconectado Desconectado

Mensajes: 60



Ver Perfil
Codigo avanzado para reproducir videos en tu Web.
« en: 27 Febrero 2015, 22:57 pm »

Hola de nuevo.!!!  ;D

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

Tengo un codigo para reproducirlos con HTML5, pero este es el código básico:
Código:
<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.  :huh:

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  :silbar:). 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...  >:(


En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #1 en: 27 Febrero 2015, 23:04 pm »

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


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
hackmastter

Desconectado Desconectado

Mensajes: 60



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #2 en: 28 Febrero 2015, 02:04 am »

Entiendo.

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

Muchas Gracias...
En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #3 en: 28 Febrero 2015, 02:11 am »

aunque sea intentaste

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

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #4 en: 28 Febrero 2015, 04:48 am »

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.
« Última modificación: 28 Febrero 2015, 04:51 am por Gus Garsaky » En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #5 en: 28 Febrero 2015, 04:56 am »

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  ;)
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #6 en: 28 Febrero 2015, 19:14 pm »

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
En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #7 en: 28 Febrero 2015, 19:30 pm »

lo ejemplos están interesantes, especialmente con respecto al buffer
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: Codigo avanzado para reproducir videos en tu Web.
« Respuesta #8 en: 28 Febrero 2015, 19:53 pm »

@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
  1. var playhead = document.querySelector(".playhead");
  2. var playheadWidth = playhead.offsetWidth;
  3. var clickOffsetLeft = e.pageX - playhead.offsetLeft;
  4. return clickOffsetLeft / playheadWidth;

Luego actualizamos el transcurso actual del vídeo:

Código
  1. var video = videosList[currentVideo];
  2. var duration = video.duration;
  3. var playheadClickPercent = getPlayheadClickPercent();
  4. 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 :xD

Saludos.
« Última modificación: 28 Febrero 2015, 20:06 pm por Gus Garsaky » En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
formato para reproducir videos en un aparato de dvd
Multimedia
lauris313 2 8,308 Último mensaje 23 Mayo 2008, 22:49 pm
por lauris313
Codigo para reproducir videos?
.NET (C#, VB.NET, ASP)
_CrisiS_ 2 4,518 Último mensaje 18 Diciembre 2010, 20:03 pm
por Shell Root
Google Docs incluirá soporte para reproducir vídeos
Noticias
wolfbcn 0 1,695 Último mensaje 8 Enero 2011, 18:10 pm
por wolfbcn
Necesito un programa para reproducir videos .256
Multimedia
ABorre 4 3,944 Último mensaje 19 Abril 2016, 17:43 pm
por MCKSys Argentina
Código para reproducir notas musicales mediante midiOutShortMsg
.NET (C#, VB.NET, ASP)
Lekim 2 3,431 Último mensaje 14 Junio 2016, 23:57 pm
por Lekim
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines