LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Adobe Flash Player 9 con soporte para Video h.264 o de alta definición (HD)

6 abril, 2008 by LeoBaraldi | 15 Comments

Adobe flash 9.0.115.0 que ya se encuentra disponible para descargar trae como novedad el soporte de video en alta resolución bajo el estándar h.264 o MPEG-4 parte 10. Este formato de compresión está diseñado para mejorar notablemente la calidad del video y su compresión con relación a la calidad / peso, logrando una excelente imagen, sea a modo ventana como fullscreen. En versiones anteriores de Flash Player cuando usábamos un componente de video o la clase netStream estábamos limitados a solo poder llamar archivos FLV, pero ya en esta nueva versión podremos llamar y cargar archivos FLV, MOV, MP4 y 3GP.
Lamentablemente el Flash Video Encoder no codifica en h.264 y por lo tanto lo deberemos hacer desde otros programas como por ejemplo Adobe Premier.
A continuación les dejo un ejemplo como siempre para que puedan verlo funcionar y puedan descargárselo. Recuerda que si no ves el video es porque tu Flash Player es antiguo.
IMPORTANTE: Cuando usen video h.264 en sus proyectos recuerden que para pre visualizarlos lo deben hacer desde su navegador web.
Action:

Clic para ver Texto Plano
Actionscript:
  1. //url del video, en este caso lo levantamos de apple
  2. var URLvideo:String = "http://movies.apple.com/movies/disney/wall-e/wall-e-vignette_h480p.mov";
  3. //definimos variables
  4. var duracion:Number = 0;
  5. var ancho:Number = 0;
  6. var alto:Number = 0;
  7. var anchoInicial:Number = Stage.width;
  8. var anchoMax:Number = System.capabilities.screenResolutionX;
  9. //escuchador para nuestro Stage
  10. var escuchador:Object = new Object();
  11. var escala:Number = 100;
  12. //nuestro campo de texto y posicion
  13. datos_txt.html = true;
  14. datos_txt.wordWrap = true;
  15. datos_txt._x = datos_txt._y=10;
  16. //creamos un objeto para la recepcion del flujo de video
  17. var mi_nc:NetConnection = new NetConnection();
  18. mi_nc.connect(null);
  19. //creamos un controlador para el video
  20. var stream_ns:NetStream = new NetStream(mi_nc);
  21. stream_ns.setBufferTime(10);
  22. //
  23. mi_video.attachVideo(stream_ns);
  24. //suavizamos el video
  25. mi_video.smoothing = true;
  26. //posicionamos al centro de la pantalla el video
  27. mi_video._x = (Stage.width/2)-(mi_video._width/2);
  28. mi_video._y = (Stage.height/2)-(mi_video._height/2);
  29. stream_ns.play(URLvideo);
  30. //leemos la duracion del video, ancho y alto del video
  31. stream_ns.onMetaData = function(infoObject:Object) {
  32. duracion = Number(Math.floor(infoObject.duration));
  33. ancho = Number(Math.floor(infoObject.width));
  34. alto = Number(Math.floor(infoObject.height));
  35. };
  36. //calculamos buffer, tiempo, fps y segundos reproducidos
  37. var bufferInterval:Number = setInterval(checkBufferTime, 100, stream_ns);
  38. function checkBufferTime(stream_ns:NetStream):Void {
  39. var bufferPorc:Number = Math.min(Math.round(stream_ns.bufferLength/stream_ns.bufferTime*100), 100);
  40. datos_txt.htmlText = "<span style="color: #ff0000;"><strong><span style="text-decoration: underline;">ESTADISTICAS</span></strong></span>";
  41. datos_txt.htmlText += "<strong>Tiempo de buffer: </strong>"+stream_ns.bufferTime+"''";
  42. datos_txt.htmlText += "<strong>Porcentaje en buffer: </strong> "+bufferPorc+"%";
  43. datos_txt.htmlText += "<strong>FPS: </strong>"+Math.floor(stream_ns.currentFps);
  44. datos_txt.htmlText += "<strong>Segundos transcurridos: </strong>"+Math.floor(stream_ns.time)+"'' de "+duracion+"''";
  45. datos_txt.htmlText += "<strong>Ancho: </strong>"+ancho+"px | <strong>Alto: </strong>"+alto+"px";
  46. }
  47. //accion para el boton pantalla completa
  48. full_btn._x = Stage.width-(full_btn._width+10);
  49. full_btn._y = 10;
  50. full_btn.onRelease = function() {
  51. Stage.displayState = Stage.displayState == "normal" ? "fullScreen" : "normal";
  52. };
  53. //acciones si se cambio el estado de la pantalla
  54. escuchador.onResize = function() {
  55. //porcentaje de escala para el video
  56. escala = Math.floor((Stage.width/848)*100);
  57. //
  58. if (Stage.displayState == "normal") {
  59. mi_video._width = ancho;
  60. mi_video._height = alto;
  61. } else {
  62. mi_video._width = (ancho*escala)/100;
  63. mi_video._height = (alto*escala)/100;
  64. }
  65. reacomodar();
  66. };
  67. Stage.addListener(escuchador);
  68. //reacomodar los elementos segun el estado de la pantalla
  69. function reacomodar() {
  70. full_btn._x = Stage.width-(full_btn._width+10);
  71. full_btn._y = 10;
  72. mi_video._x = (Stage.width/2)-(mi_video._width/2);
  73. mi_video._y = (Stage.height/2)-(mi_video._height/2);
  74. }

ver ejemplodescargar archivos
Share|

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, amplios conocimientos en CEO. Desarrollador de sitios multi plataformas, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

15 Comments

Leave a reply →

  1. jokerman
    2 agosto, 2008 at 12:28 pm

    ¿Que hay que tener en el escenario? ¿un componente de video?¿de que tipo?. Tengo instalado Flash Player 10 y no consigo ver el video aunque si oigo el sonido.

  2. LeoBaraldi
    3 agosto, 2008 at 10:11 pm

    Como veras en el ejemplo se coloca un video linqueado creado en la galeria y por medio de las clases netstream y netconnetion se hace que se pueda reproducir el video, pero tu problema debe estar en la versión de flash player que usas, ya que la 10 es una beta

  3. Pingback: rinobox.com » Blog Archive » Adobe Flash Player 9 con soporte para Video h.264 o de alta definición (HD)

  4. esteban
    10 septiembre, 2008 at 1:44 pm

    Antes que nada Gracias Leo, por estos codigos que me facilitaron mucho poner videos en mi web, pero estoy intentando sumarle a este codigo de videos h264 un preloader y un controlador y todo lo que intente no me funciono... alguna idea de como sumarle esos dos temitas?
    Gracias de antemano

  5. LeoBaraldi
    11 septiembre, 2008 at 1:38 pm

    Hola Esteban, si te fijas ya esa funcionalidad esta puesta en esta funcion checkBufferTime()
    como veras solo lo que hace es imprimir el tiempo de buffer que cargo del vídeo, lo que puedes hacer es mostrarlos en una barra o un iconito que diga cargando, puedes mostrarlo o no dicho icono utilizando la funcion onStatus (controlador NetStream.onStatus)con esto pudras desencadenar eventos según el vídeo este cargado, sin buffer, si finalizo o si no se pudo encontrar el archivo, si sigues sin conseguirlo envíame un mail.

  6. rakeljuice
    11 diciembre, 2008 at 11:40 am

    El ejemplo que has subido esta en cs3? Porque no puedo abrirlo con flash 8, que es la verson que tengo.Gracias, Rakeljuice

  7. RaAn
    17 enero, 2009 at 7:05 pm

    Te escribo solo para darte las gracias!, enserio que sorprendente que haya personas como tu compartan sus conocimiento mas aún cuando estamos en un mundo tan competitivo.

    Si tengo alguna duda te aviso jeje
    ...Saludos

  8. Alex
    20 enero, 2009 at 8:18 am

    Estoy atrapado... no consigo hacer que sea sólo el video el que ocupe la pantalla y no aparezca el resto de la web.

    Dentro de un reproductor de listas de videos... tengo un boton que hace esto...

    Clic para ver Texto Plano
    Actionscript:
    1. mcControls.fullScreen_btn.onRelease = function():Void 
    2. {
    3.             Stage["displayState"] = "fullScreen";
    4. };

    que codigo faltaría poner para que sólo ver el video y no el resto de la web.

    gracias de antemano

    alex

  9. LeoBaraldi
    20 enero, 2009 at 5:19 pm

    aca esta como lo solucione yo

    Clic para ver Texto Plano
    Actionscript:
    1. full_btn.onRelease = function() {
    2. Stage.displayState = Stage.displayState == "normal" ? "fullScreen" : "normal";
    3. };
    4. //acciones si se cambio el estado de la pantalla
    5. escuchador.onResize = function() {
    6. //porcentaje de escala para el video
    7. escala = Math.floor((Stage.width/848)*100);
    8. //
    9. if (Stage.displayState == "normal") {
    10. mi_video._width = ancho;
    11. mi_video._height = alto;
    12. } else {
    13. mi_video._width = (ancho*escala)/100;
    14. mi_video._height = (alto*escala)/100;
    15. }
    16. reacomodar();
    17. };
    18. Stage.addListener(escuchador);
    19. //reacomodar los elementos segun el estado de la pantalla
    20. function reacomodar() {
    21. full_btn._x = Stage.width-(full_btn._width+10);
    22. full_btn._y = 10;
    23. mi_video._x = (Stage.width/2)-(mi_video._width/2);
    24. mi_video._y = (Stage.height/2)-(mi_video._height/2);
    25. }

  10. Sebastian
    16 marzo, 2009 at 1:04 pm

    Una pregunta, como seria para controlar el audio del clip ?

  11. LeoBaraldi
    21 marzo, 2009 at 1:16 am

    Podes de esta manera:

    Clic para ver Texto Plano
    Actionscript:
    1. //para controlar el audio crea un objeto Sound
    2. var sonido:Sound = new Sound(this)
    3. //para el nivel del volumen como se muestra abajo
    4. sonido.setVolume(50)
    5. //los valores van desde 0 a 100

  12. Anuar Garcés
    24 marzo, 2009 at 11:29 pm

    Hola Leo, esta muy bueno tu ejemplo, te sacaste un 10, sólo una pregunta, cómo le hago para poder reproducir varios videos por medio de una lista en xml o algo asi???

    Gracias!!!!!!

  13. claudio
    5 abril, 2009 at 3:46 pm

    hola leo, la web como siempre muy buena, quisrea saber si este reproductor soporta rtmp stream ,porque quisiera ponerle mi cam y que transmita en vivo,ne podrias ayudar con algun tutorial gracias de antemano por siempre ayudar a los demas,suerte

  14. Luis
    14 abril, 2009 at 3:19 pm

    Hola leo:
    Necesito ayuda para poner varios videos en mi web.
    El tema es que pude con un video, pero cuando quiero salir de la galeria videos
    este queda y no se va.
    Agradeceria muchisimo algunos consejos.
    este es el script que estoy utilizando.
    stop();
    //Cargo el video youtube
    loadMovieNum("http://www.youtube.com/v/T3VfVtm3m8g",99);
    mc = _root.createEmptyMovieClip("controlador",1000);
    mc.nivel=99;
    mc.onEnterFrame = function()
    {
    if (_level99._width>0 && _level99._height>0)
    {
    //Le cambio el tamaño del video
    _level99._width=5000;
    _level99._height=3000;

    //Le doy la posicion que quiero que tenga el video
    _level99._x=400;
    _level99._y=210;
    this.removeMovieClip();
    }
    }

  15. Renato
    7 febrero, 2011 at 12:23 am

    Estimado leo. este tema es bastante viejo aca en tu web pero es justo lo que necesito para mi, el problema es que tanto en el link de tu ejemplo con en los archivos que pones sale NO SE ENCONTRO EL VIDEO, mi server tiene la CURL activas, ademas deve ser mal el mismo archivo ya que ni en tu web de ejemplo funciona.
    Te rograria abusando de tu bondad que me digas cual puede ser el problema. mi mail es ansisweb@hotmail.com

Deja un comentario

Required fields are marked *.

*