asd

31

Dic

Incluir videos de Youtube en tu swf, descagar video youtube con flash, lista personalizada de videos youtube en flash

Publicado por: LeoBaraldi

(08-10-2009) NOTICIA!: Nuevamente el problema de que no se veian los videos ya esta solucionado! descarguen los nuevos files ;)

Navegando por la pagina de unijimpe me encontré con un tuto en php para descargar video de youtube simplemente indicando el valor de id del video, me pareció una excelente idea más si dicha idea podíamos aprovecharla en flash para crear un reproductor con nuestra propia lista de videos y un reproductor armado por nosotros mismos.

reproductor.jpg

Bueno ante que todo se agradece a unijimpe por el php que dio origen a todo el AS que desarrolle.

Es muy simple de utilizar, para flash simplemente utilizamos la clase NetStream y para indicar los videos que deseamos, construimos un archivo de tipo xml para indicar la lista de videos de youtube a reproducir. Con la posibilidad de también cargar un titulo y pequeña descripción del video.

En la estructura del xml, el atributo id=”” dentro de las comillas debe ir el id de video que vemos en youtube, en la siguiente imagen se resalta lo que deben copiar y pegar.
Puede pasar que la url sea así: http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related en ese caso el id es el la parte resaltada en bold http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related

id.jpg

Entre las etiquetas CDATA indicamos la descripción del video como así en el atributo titulo el valor o cadena de texto para dicho título.

El xml utilizado:

Clic para ver Texto Plano
XML:
  1. <![CDATA[Presentación equipo subaru rally 2007 para el campeonato del mundo 2008]]>
  2. </video>
  3. <video id="GF4qad2sj00" titulo="Capusotto">
  4. <![CDATA[Me encanta este video!]]>
  5. </video>
  6. <video id="6qEcX01WrNk" titulo="Previa de Soda en Cba">
  7. <![CDATA[Se presento soda y fue toda una fiesta, impresionante!]]>
  8. </video>
  9. <video id="do1dAX-IVTE" titulo="El bananero - Harry Potter">
  10. <![CDATA[Aca un video para morirse de risa del amigo elbananero]]>
  11. </video>
  12. <video id="qAWFk63Lrmw" titulo="Battlefield 2142 U2">
  13. <![CDATA[Este un video que lo puse porque si nomas no tenia ganas de buscar ni de escribir]]>

Actionscript utilizado para el reproductor:

Clic para ver Texto Plano
Actionscript:
  1. //Dominio donde esta alojado nuestro php
  2. var dominio:String = "";
  3. //nuestro php propiamente dicho
  4. var FilePHP:String = "phpyoutube.php";
  5. //nuestro xml con la lista de videos
  6. var FileXML:String = "videos.xml";
  7. //el valor de id del video en youtube
  8. var id:String = "";
  9. //
  10. var contador:Number = 0;
  11. //
  12. var miXML:XML = new XML();
  13. miXML.ignoreWhite = true;
  14. //
  15. var ListVideos:Array = new Array();
  16. miXML.onLoad = function(ok) {
  17. if (ok) {
  18. ListVideos = this.firstChild.childNodes;
  19. cantVideos_txt.text = "total videos: "+String(ListVideos.length);
  20. id = ListVideos[0].attributes.id;
  21. cargarVideo();
  22. loadDtaVdo();
  23. //
  24. } else {
  25. }
  26. };
  27. miXML.load(dominio+FileXML);
  28. //aca recibimos el resultado del php
  29. var result_lv:LoadVars = new LoadVars();
  30. result_lv.onLoad = function(success:Boolean) {
  31. if (success) {
  32. /*********************************************/
  33. //desde aqui el cambio realizado para el 08-10-2009
  34. var varsTemp:LoadVars = new LoadVars()
  35. varsTemp.decode(String(this))
  36. var urlText:String = varsTemp.toString()
  37. urlText = urlText.substr(35,urlText.length)
  38. urlText = urlText.split('%2C').join(',');
  39. urlText = urlText.split('%2E').join('.');
  40. urlText = urlText.split('%2F').join('/');
  41. urlText = urlText.split('%3F').join('?');
  42. urlText = urlText.split('%3D').join('=');
  43. urlText = urlText.split('%3A').join(':');
  44. my_ns.play(urlText);
  45. //hasta aqui el cambio realizado para el 08-10-2009
  46.  
  47. } else {
  48. trace("Error connecting to server.");
  49. }
  50. };
  51. //enviamos los datos al php
  52. var send_lv:LoadVars = new LoadVars();
  53. function cargarVideo() {
  54. status_txt._visible = true;
  55. status_txt.text = "cargando...";
  56. send_lv.item = id;
  57. send_lv.type = 0;
  58. send_lv.sendAndLoad(dominio+FilePHP,result_lv,"GET");
  59. }
  60. //el encargado de cargar y reproducir el video
  61. var my_video:Video;
  62. var my_nc:NetConnection = new NetConnection();
  63. my_nc.connect(null);
  64. var my_ns:NetStream = new NetStream(my_nc);
  65. my_video.attachVideo(my_ns);
  66. //suavizado del video
  67. my_video.smoothing = true;
  68. //duracion del buffer
  69. my_ns.setBufferTime(4);
  70. //duracion del video
  71. my_ns.onMetaData = function(infoObject:Object) {
  72. //trace(Math.floor(infoObject.duration));
  73. };
  74. //enviamos datos de que esta sucediendo
  75. my_ns.onStatus = function(infoObject:Object) {
  76. if (infoObject.code == "NetStream.Buffer.Full") {
  77. status_txt._visible = false;
  78. }
  79. if (infoObject.code == "NetStream.Play.Start") {
  80. status_txt._visible = true;
  81. buffer();
  82. }
  83. if (infoObject.code == "NetStream.Play.Stop") {
  84. status_txt.text = "Video finalizado!";
  85. }
  86. if (infoObject.code == "NetStream.Play.StreamNotFound") {
  87. status_txt.text = "No se encontro el video!!!";
  88. }
  89. };
  90. //con esto sabemos si ya esta el buffer listo!
  91. function buffer() {
  92. this.onEnterFrame = function() {
  93. var porcentaje:Number = Math.min(Math.round(my_ns.bufferLength/my_ns.bufferTime*100), 100);
  94. status_txt.text = "Buffer:"+porcentaje+"%";
  95. if (porcentaje == 100) {
  96. delete this.onEnterFrame;
  97. }
  98. };
  99. }
  100. //un efectito fade
  101. MovieClip.prototype.fade = function(direccion:String, velocidad:Number) {
  102. if (direccion == "in") {
  103. var efecto = mx.transitions.easing.Regular.easeIn;
  104. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 100, velocidad, true);
  105. } else {
  106. var efecto = mx.transitions.easing.Regular.easeOut;
  107. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 0, velocidad, true);
  108. }
  109. };
  110. //creamos la funcionalidad de los botones y cargamos los datos de la info
  111. function loadDtaVdo() {
  112. for (var i = 0; i&lt;2; i++) {
  113. this["video"+i].fdoFicha_mc._alpha = 0;
  114. this["video"+i]._alpha = 0;
  115. this["video"+i].fade("in",0.5);
  116. var temp = this["video"+i].fdoFicha_mc;
  117. this["video"+i].reproducir_mc.fondo = temp;
  118. this["video"+i].mini_mc.loadMovie("http://img.youtube.com/vi/"+ListVideos[contador].attributes.id+"/1.jpg");
  119. this["video"+i].titulo_txt.text = ListVideos[contador].attributes.titulo;
  120. this["video"+i].descripcion_txt.text = ListVideos[contador].firstChild;
  121. //
  122. this["video"+i].reproducir_mc.id = ListVideos[contador].attributes.id;
  123. this["video"+i].reproducir_mc.onRelease = function() {
  124. video0.fdoFicha_mc._alpha = 0;
  125. video1.fdoFicha_mc._alpha = 0;
  126. this.fondo.fade("in",0.5);
  127. id = this.id;
  128. cargarVideo();
  129. //
  130. };
  131. if (this["video"+i].reproducir_mc.id == id) {
  132. this["video"+i].fdoFicha_mc.fade("in",0.5);
  133. }
  134. if (contador == ListVideos.length-1) {
  135. contador = 0;
  136. } else {
  137. contador++;
  138. }
  139. }
  140. }
  141. //accion boton siguiente
  142. siguiente_btn.onRelease = function() {
  143. loadDtaVdo();
  144. };
  145. //

ver ejemplodescargar archivos
categorias: API's , ActionScript 2 , PHP Coment.: 38

38 Respuestas

    migue Dice:
    4th Enero, 2008 at 3:29 pm

    estoy intentando estudiar tu archivo para reproducir videos de youtube.

    ¿Es posible añadirle a los vídeos play-pause y ajuste de sonido?

    Lo he intentado pero no lo consigo

    LeoBaraldi Dice:
    17th Enero, 2008 at 7:53 pm

    Para controlar el sonido simplemente debajo de todo el codigo puedes poner asi:
    var sonido:Sound = new Sound()
    sonido.setVolume(20)
    el valor 20 es el volumen 0 es nada y 100 es el maximo volumen del sonido

    LeoBaraldi Dice:
    17th Enero, 2008 at 7:57 pm

    Para pausar el video simplemente llama esto mediante una acción o función y listo:
    my_ns.pause()
    Recorda que esto pausa el video si este se esta reproduciendo y si esta pausado esta misma acción reanuda la reproducción ;)

    LeoBaraldi Dice:
    25th Febrero, 2008 at 11:27 am

    Bueno me fije en tu xml y esta perfecto, probe yo subir un xml con los videos que vos pusiste y tambien anda perfecto, debe ser que tu servidor no es del todo compatible con php :( te mando de todos modos a tu mail el fla en flash 8

    pablok Dice:
    7th Marzo, 2008 at 2:55 pm

    Leo espectacular y claro el script. Gracias.

    Xavierlight Dice:
    23rd Abril, 2008 at 5:53 pm

    Fantastico reproductor de video, para los amigos a los cuales no nos soporta el servidor, seria posible llamar los videos unicamente con XML, y no utilizando el php?
    Gracias por tu atencion

    Xavierlight Dice:
    23rd Abril, 2008 at 8:41 pm

    Excelente reproductor de videos, felicitaciones, para los amigos que no tenemos php en nuestro servidor, seria posible modificar este reproductor para usarlo unicamente con XML?? Gracias por la atencion

    Escelente Dice:
    6th Mayo, 2008 at 6:15 am

    Me parece muy interesante lo único es que intento abrir el *.fla y me dice formato del archivo inesperado me podéis enviar el *.fla a daubets@gmail.com

    Fire-arts Dice:
    18th Mayo, 2008 at 5:05 pm

    Hola Leo: Tu pagina es muy interesante y este reproductor esta super. He intentado abrir el archivo .fla pero no ha sido posible, agradeceré puedas enviarnos el archivo. De antemano, muchas gracias y exitos en los negocios. Saludos desde Lima - Perú

    LeoBaraldi Dice:
    19th Mayo, 2008 at 6:05 pm

    El archivo lo verifique y se puede descaegar correctamente, recuerden que deben abrirlo con flash 9, pasame tu email y te lo envio!

    pablok Dice:
    1st Agosto, 2008 at 3:21 pm

    tu script esya funcionand de manera exelente en mi web http://www.3gatos.com.ar gracias nuevamente

    LeoBaraldi Dice:
    2nd Agosto, 2008 at 12:53 am

    :) buenisimo!!! que bueno es ver que alguien muestre como lo utilizo, te felicito por la implementación!

    Pablo Dice:
    7th Agosto, 2008 at 5:06 pm

    Leo :
    tenés algún componente flash o como es el código que se inserta en el html para reproducir mp3? no encuentro como hacerlo y me pasaron uno en el que ademas de insertar el código en el html tengo que generar un xml donde va el path del archivo .MP# esto no me sirve porque yo tengo que pasar por parámetro en html el path del archivo mientras las web se carga en tiempod e ejecución....hay algo?

    LeoBaraldi Dice:
    7th Agosto, 2008 at 10:22 pm

    Para esos casos puedes utilizar flashvars, actualmente no hay ningun tuto sobre el mismo, ya voy a preparar algo pero visitate este link que puede orientarte un poco mejor http://blog.unijimpe.net/como-utilizar-flashvars/

    Alex Dice:
    4th Noviembre, 2008 at 12:53 pm

    Gracias amigo, ciertamente tu proyecto de video estaba fenomenal... sin embargo sigue palante amigo hay muchos que admiramos tu trabajo...!

    Diego Dice:
    20th Diciembre, 2008 at 3:47 pm

    Hola Leo, una consulta. Es posible setear la calidad de reproducción del video con el atributo que tiene youtube (&fmt=) para que sea 6 o 18?
    Muchas gracias de antemano!

    LeoBaraldi Dice:
    22nd Diciembre, 2008 at 9:19 pm

    Te refieres a las proporciones?

    Daniel Gorosito Dice:
    31st Diciembre, 2008 at 5:13 pm

    Hola Leo, gracias por liberar código tan útil.
    Lo he implementado y funciona a la perfeccion, pero no he podido hacer funcionar esta línea:
    my_ns.onMetaData = function(infoObject:Object) {
    trace(Math.floor(infoObject.duration));
    };
    pareciera no reconocer onMetaData, necesito esa funcionalidad para poder implementar la barra seek del video. Gracias desde ya por cualquier pista que puedas tirar en su resolución.

    Vlad Teppes Dice:
    6th Enero, 2009 at 9:44 am

    la mejor solucion que he encontrado
    facil de modificar
    lastima que no se vea el reproductor original de youtube

    esta espectacular

    Daniel Gorosito Dice:
    9th Febrero, 2009 at 8:32 am

    Hola Leo, nuevamente agradezco haberte encontrado y que difundas tu trabajo, me ha servido de mucho y he aprendido también al "copiarte". Podés ver cómo ha quedado lo que hice gracias a tu ayuda: http://www.fullaventura.com/indexVideos.asp
    (solo la parte de videos, y a prueba por ahora)
    Saludos! Daniel

    claudio Dice:
    9th Febrero, 2009 at 5:56 pm

    amigo estuve buscando esto de youtube por dias ,y encontre esta maravillosa web,gracias por las cosas que enseññas,pero tengo una pregunta y quisiera saber si me podrias ayudar quisiera que el video no se reprodusca automaticamente,y si es posible que se ponga tambien a pantalla completa al clickearlo ,gracias por todo lo que ayudas a la gente,

    LeoBaraldi Dice:
    10th Febrero, 2009 at 10:21 pm

    Gracias Daniel, y es muy grato para mi que te sea útil!

    LeoBaraldi Dice:
    10th Febrero, 2009 at 10:51 pm

    Claudio: my_video.pause() para detener el video cuando quieras, en este caso te conviene ponerlo entre la lineas 32 y 33,
    Para verlo fullScreen puedes usar algo asi

    Clic para ver Texto Plano
    Actionscript:
    1. Stage.displayState = Stage.displayState == "normal" ? "fullScreen" : "normal";

    o mejor mira este tutorial que ya tiene esa funcionalidad y extrae esa funcion y colocalo en este. http://www.leobaraldi.com.ar/2008/04/06/video-h264-o-de-alta-definicion-hd-en-flash-player-9/

    Jhosett Dice:
    3rd Marzo, 2009 at 10:12 am

    Hola, soy nuevo en esto pero me gusto este reproductor, quisiera saber como puedo hacer para que reprodusca mis videos. gracias.

    LeoBaraldi Dice:
    21st Marzo, 2009 at 1:10 am

    Puedes resolverlo asi Jose:

    Clic para ver Texto Plano
    Actionscript:
    1. botonPausaReanudar.onRelease = function() {
    2.  //esta es la acción para pausar cuando llamas la función
    3.  //por primera vez, si la llamas de nuevo reanuda desde donde quedo
    4.  //automáticamente, es como un alternador, activa la primera vez
    5.  //reanuda la segunda vez
    6.  my_ns.pause();
    7.  //NOTA si lo que quieres es detener definitivamente seria así: my_ns.close()
    8.  //con eso cortamos el flujo de video
    9. };
    10. //para controlar el audio crea un objeto Sound
    11. var sonido:Sound = new Sound(this)
    12. //para el nivel del volumen como se muestra abajo
    13. sonido.setVolume(50)
    14. //los valores van desde 0 a 100

    Gary Dice:
    21st Marzo, 2009 at 3:57 pm

    Hola Leo, no he podido hacer funcionar tu reproductor, dime? hay algo que activar en el php.ini, yo uso el xamp y pense que todo venia activo.(Me dice video no encontrado). Help

    LeoBaraldi Dice:
    21st Marzo, 2009 at 5:03 pm

    Reviza que tu servidor tenga la libreria CURL, sino prueba subir los files a un host.

    Gary Dice:
    23rd Marzo, 2009 at 6:47 pm

    Hola Leo, mil gracias era la libreria CURL el problema :) te dejo el link http://came.edu.pe/index.php?id=31 esto lo publique gracias a ti, ahora estoy viendo como le puedo poner pause. pero ya esta :) thanks

    Julio Dice:
    23rd Marzo, 2009 at 9:55 pm

    Hola Leo. Primero dejame felicitarte por el genial trabajo que te hiciste. He estado buscando algo asi para poder despejar algunas de mis dudas, pues siempre he tenido en la cabeza el como hacer este tipo de cosas.
    Leo, no se si sera demaciada confianza la mia. He notado que en tu AS usas una variable llamada contador, la cual inicia en 0. Ese contador, debo suponer, es contador de los cliks que se le hace a un video. Mi pregunta es, de ser asi, donde se guarda el conteo de cliks por video, en un notepad?, en una tabla dentro de la BD?.
    O acaso estoy equivocao con respecto a esa variable y tiene otro uso. Se puede hacer un contador el cual la cantidad de cliks vaya directamente a un notepad y no a una tabla?. Espero no ser demaciado confianzudo, solo son preguntas, pues como te decia estoy aprendiendo Flash y, como tu tienes conocimientos muy avanzados, queria saber si es que se puede hacer eso.
    GRacias, por el trabajazo que te hiciste y por la paciensia que tienes para leer las interrogantes.
    Saludos.

    leo Dice:
    25th Marzo, 2009 at 1:55 pm

    hola leo excelente proyecto... no he podido hacer funcionar el reproductor... el archivo .fla es para la version 9 verdad??? me podrias enviar el .fla a mi correo en version 8... gracias

    incubus Dice:
    26th Agosto, 2009 at 3:04 pm

    Que tal Leo ante todos felicitarte por los grandes aporte.
    Mi consulta mas que todo es que acabo de descargar el archivo, subido a un servidor pero no lo reproduce .. http://www.creatuhost.com/youtube/video.html ..Quisiera que porfavor me dijeras que hice mal oh si hay algun eror en algun codigo si es asi quisiera que respondieras a la brevedad posible.
    Gracias de antemano.

    LeoBaraldi Dice:
    26th Agosto, 2009 at 11:34 pm

    Reviza que tu servidor tenga la libreria CURL

    nacho Dice:
    6th Diciembre, 2009 at 3:06 pm

    Leo, estoy tratando de implementar esta funcion pero agregandole botones de play/pausa, control de volumen y seekbar. He intentado de muchas formas y he buscado mucho en google durante dias y no encuentro la forma; ¿podrias ayudarme en esto por favor? Gracias por este aporte, el reproductor queda buenisimo.

    Daniel Gorosito Dice:
    16th Enero, 2010 at 11:41 pm

    Hola Leo, sabés si con esto mismo podemos reproducir video HD de youtube? estuve probando pero no pude, encontre que en la ruta de los videos HD aparece un parametro: fexp=
    y el parametro itag cambia de 5 a 18, es todo lo que pude ver, si sabes algo chiflá!
    gracias

    LeoBaraldi Dice:
    31st Enero, 2010 at 7:39 pm

    Daniel para poder ver video con mejor calidad, primero dicho video debe estar disponible en youtube, 2 busca la linea nº 57 que tiene esto

    Clic para ver Texto Plano
    Actionscript:
    1. send_lv.type = 0;

    y reemplazala por la calidad que quieras teniendo en cuenta este detalle: //calidad del video: 0 -> 320x240 para videos viejos o 400x226 para videos nuevos - 18 -> 480x270 - 22 -> 1280x720

    edsu Dice:
    4th Febrero, 2010 at 3:34 am

    hola brother primero felicitarte por el script .. lo andube buscando .. bueno trengo una sugerencia para ti . espero no te incomode.. solo que aveces asi como yo hay muchos que no sabemos flash .. bueno solo lo basico .. como editar un poco de action script .. la verdad es que ese scritp estaria bomba si le pones activados los botones de control y que muestre mas de 2 videos ... creo que estaria mucho mejor .. bueno es mi humilde comentario espero que se haga realidad lo que pido .. gracias de antemano .. saludos desde peru

    Daniel Gorosito Dice:
    4th Febrero, 2010 at 10:28 pm

    Gracias Leo! ya esta andando como yo quería, mil gracias, si podés miralo en tangorallyteam.com

    jc Dice:
    14th Abril, 2010 at 11:17 pm

    Leo, ya no se pueden ver los videos, porfa date un tiempo para arreglarlo. Gracias

Publicar comentario

IMPORTANTE: Los comentarios son moderados. A la brevedad seran subidos.

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi