1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

[TUTORIAL] Reproductor de video II

Tema en 'Tutoriales Desarrollo Web' iniciado por SAPINTO, 17 Jun 2006.

  1. SAPINTO

    SAPINTO Nuevo usuario

    ...continuacion de Reproductor de video I

    ENHORABUENA! ha completado todos los elementos que se requieren para un reproductor de video. nuestra libreria deberia verse como esto:
    <img src="http://www.foros.hammer.cl/pics/libreria.jpg" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />

    ahora vamos a afinar algunos detalles.

    vamos a alinear el play y pausa, en action uno desaparecera cuando el otro este presionado, si entendieron eso que dije, me lo explican :p
    <img src="http://www.foros.hammer.cl/pics/playalign.jpg" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />

    ahora vamos al <!--coloro:#FF6600--><span style="color:#FF6600"><!--/coloro-->layer textos<!--colorc--></span><!--/colorc-->, aqui crearemos un campo de texto dinamico llamado timevid_txt.
    <i>importante: es altamente recomendable situar el texto dinamico en <!--coloro:#FF6600--><span style="color:#FF6600"><!--/coloro-->coordenadas enteras<!--colorc--></span><!--/colorc-->, en este caso x=192, y=200, asi aseguramos la legibilidad del mismo (sino se revienta).</i>
    <img src="http://www.foros.hammer.cl/pics/timevid.jpg" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />

    error comun: no se me ven los textos.
    cuando es una tipografia poco comun, como la que use aqui, tenemos que hacer un embed, esto incluira los caracteres en el swf, pero para que no aumente el peso, selecciono los numeros y el simbolo <!--coloro:#FF6600--><span style="color:#FF6600"><!--/coloro-->:<!--colorc--></span><!--/colorc-->, ya que esta caja de texto dinamica esta destinada a mostrar el tiempo transcurrido (00:18 por ejemplo)
    <img src="http://www.foros.hammer.cl/pics/embed.jpg" border="0" onload='image_resizer._create(this)' alt="Imagen IPB" />



    LISTO!, ahora les dejo el action, le puse comentarios para que se explique mejor, solo cabe destacar que la ruta del video es <!--coloro:#FF6600--><span style="color:#FF6600"><!--/coloro-->flv/The Distillers - Drain The Blood.flv<!--colorc--></span><!--/colorc-->, ya que el flv esta dentro de la carpeta flv, esto puede funcionar si le indicamos la ruta (por ejemplo: <a href="http://www.tallerwebmaster.com/tutorial/flv/The" target="_blank">http://www.tallerwebmaster.com/tutorial/flv/The</a> Distillers - Drain The Blood.flv)

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->//coneccion del video
    var nc:NetConnection = new NetConnection();
    nc.connect(null);

    var ns:NetStream = new NetStream(nc);

    miVideo.attachVideo(ns);

    //carga el video de la carpeta flv, tambien puede ser del servidor, en ese caso, colocar ruta
    ns.play("flv/The Distillers - Drain The Blood.flv");
    //este es el tiempo del buffer en segundos
    ns.setBufferTime(10);

    //mensaje cargando video dentro del mc bufferclip
    ns.onStatus = function(info) {
    if(info.code == "NetStream.Buffer.Full") {
    bufferclip._visible = false;
    }else{
    bufferclip._visible = true;
    }

    }


    //para el tiempo transcurrido del video

    var time_interval:Number = setInterval(checkTime, 0, ns);
    function checkTime(mi_ns:NetStream) {
    var ns_seconds:Number = mi_ns.time;
    var minutes:Number = Math.floor(ns_seconds/60);
    var seconds = Math.floor(ns_seconds%60);
    if (seconds<10) {
    seconds = "0" + seconds;
    }
    timevid_txt.text = "0" + minutes + ":" + seconds;
    }
    //botones
    _root.createEmptyMovieClip("vSound",_root.getNextHighestDepth());
    vSound.attachAudio(ns);

    var so:Sound = new Sound(vSound);

    so.setVolume(100);

    mute.onRollOver = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;if(so.getVolume()== 100) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("onOver");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;else {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("muteOver");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }

    mute.onRollOut = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;if(so.getVolume()== 100) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("on");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;else {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("mute");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }

    mute.onRelease = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;if(so.getVolume()== 100) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;so.setVolume(0);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("muteOver");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;else {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;so.setVolume(100);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.gotoAndStop("onOver");
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }

    playButton._visible= false;
    playButton.onPress = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;ns.pause();
    &nbsp;&nbsp;&nbsp;&nbsp;this._visible= false;
    &nbsp;&nbsp;&nbsp;&nbsp;pauseButton._visible= true;
    }
    pauseButton.onPress = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;ns.pause();
    &nbsp;&nbsp;&nbsp;&nbsp;this._visible= false;
    &nbsp;&nbsp;&nbsp;&nbsp;playButton._visible= true;
    }

    //barra de desplazamiento
    this.createEmptyMovieClip("vFrame",this.getNextHighestDepth());
    vFrame.onEnterFrame = videoStatus;

    var amountLoaded:Number;
    var duration:Number;

    ns["onMetaData"] = function(obj) {
    &nbsp;&nbsp;&nbsp;&nbsp;duration = obj.duration;
    }

    function videoStatus() {
    &nbsp;&nbsp;&nbsp;&nbsp;amountLoaded = ns.bytesLoaded / ns.bytesTotal;
    &nbsp;&nbsp;&nbsp;&nbsp;barra.progreso._width = amountLoaded * 140;
    &nbsp;&nbsp;&nbsp;&nbsp;barra.scrub._x = ns.time / duration * 140;
    }

    var scrubInterval;

    barra.scrub.onPress = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;vFrame.onEnterFrame = scrubit;
    &nbsp;&nbsp;&nbsp;&nbsp;this.startDrag(false,0,this._y,140,this._y);
    }

    barra.scrub.onRelease = barra.scrub.onReleaseOutside = function() {
    &nbsp;&nbsp;&nbsp;&nbsp;vFrame.onEnterFrame = videoStatus;
    &nbsp;&nbsp;&nbsp;&nbsp;this.stopDrag();
    }

    function scrubit() {
    &nbsp;&nbsp;&nbsp;&nbsp;ns.seek(Math.floor((barra.scrub._x/140)*duration));
    }

    //por ultimo el menu
    var elMenu:ContextMenu = new ContextMenu();
    elMenu.hideBuiltInItems();
    _root.menu = elMenu;

    var item1:ContextMenuItem = new ContextMenuItem("::::: Control de video :::::",trace);
    elMenu.customItems[0] = item1;

    var item2:ContextMenuItem = new ContextMenuItem("Play / Pause",pauseIt,true);
    elMenu.customItems[1] = item2;

    var item3:ContextMenuItem = new ContextMenuItem("Replay Video",restartIt);
    elMenu.customItems[2] = item3;

    var item4:ContextMenuItem = new ContextMenuItem("video player by SAPINTO",trace,true);
    elMenu.customItems[3] = item4;

    function pauseIt() {
    &nbsp;&nbsp;&nbsp;&nbsp;ns.pause();
    &nbsp;&nbsp;&nbsp;&nbsp;if(pauseButton._visible = false){
    &nbsp;&nbsp;&nbsp;&nbsp;playButton._visible= true;
    &nbsp;&nbsp;&nbsp;&nbsp;}else{
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playButton._visible= false;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }



    function restartIt() {
    &nbsp;&nbsp;&nbsp;&nbsp;ns.seek(0);
    }<!--c2--></div><!--ec2-->


    ----------EDITO-----------

    con el fabuloso tag de flash! bien quique por eso :vale:
    EJEMPLO:
    <!--Flash 240+240+http://www.tallerwebmaster.com/tutorial/video_tutorial.swf--><OBJECT CLASSID='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' WIDTH=240 HEIGHT=240><PARAM NAME=MOVIE VALUE=http://www.tallerwebmaster.com/tutorial/video_tutorial.swf><PARAM NAME=PLAY VALUE=TRUE><PARAM NAME=LOOP VALUE=TRUE><PARAM NAME=QUALITY VALUE=HIGH><EMBED SRC=http://www.tallerwebmaster.com/tutorial/video_tutorial.swf WIDTH=240 HEIGHT=240 PLAY=TRUE LOOP=TRUE QUALITY=HIGH></EMBED></OBJECT><!--End Flash-->

    FLA: <a href="http://www.tallerwebmaster.com/tutorial/video_tutorial.fla" target="_blank">http://www.tallerwebmaster.com/tutorial/video_tutorial.fla</a>

    pd: haganle click derecho al ejemplo :vale:
     
  2.  
  3. SAPINTO

    SAPINTO Nuevo usuario

    nota: con el click derecho sale un menu de reproduccion, pero la c*gué y no puse correctamente el codigo, por lo que lo voy a arreglar el domingo, ya que ahora me voy a emborrachar.

    ah y otra cosa, luego explicare como agrgar un componente "combobox" para cargar una lista de videos desde un archivo xml.

    cualquier sugerencia o consulta, no duden en preguntar :vale:
     
  4. adi

    adi Zen Moderator

    Excelente :clapping:
     
  5. REG

    REG Nuevo usuario

    Muchas gracias por el aporte, Sapinto.
     
  6. elQuique

    elQuique Usuario activo

    Muy bueno lo dije en el uno y lo repito hoy porque lo vi de nuevo al 1 y 2 :)
     
  7. Jkexer

    Jkexer Nuevo usuario

    Soy aún nuevo con este programa, pero cuando exporto el video en flash por qué se divide en dos archivos, el primero creo que es el video y el otro son los comandos (play, pause, next, mute, etc), estoy haciendo algo mal?
     
  8. SAPINTO

    SAPINTO Nuevo usuario

    siempre son dos archivos:

    1.- el .flv (flash video)
    2.- el swf que llama a tu .flv

    sigue paso por paso este tutorial y fijate en el codigo, donde dice:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    //carga el video de la carpeta flv, tambien puede ser del servidor, en ese caso, colocar ruta
    ns.play("flv/The Distillers - Drain The Blood.flv");
    <!--c2--></div><!--ec2-->
    es ahi donde el swf busca el archivo flv...

    me explico?

    parte I del tutorial:
    <a href="http://www.forocreativo.net/ipb/index.php?showtopic=12563" target="_blank">http://www.forocreativo.net/ipb/index.php?showtopic=12563</a>
     
  9. kitsch

    kitsch Nuevo usuario

    Impresionante!!!! Impresionante!!! A los super favs de ya!!
     
  10. Jkexer

    Jkexer Nuevo usuario

    Puedo dividir el video en frames, para poder editarlo y poner otras cosas?
     
  11. SAPINTO

    SAPINTO Nuevo usuario

    ese es otro cuento, podrias tenerlo en frames si le haces un emmbed, ahi puedes modificar los frames, pero tambien estan los cue points, que guardan informacion en un codigo de tiempo establecido a la hora de la conversion... mas complejo, aunque mas pro.
     
  12. kitsch

    kitsch Nuevo usuario

    Pregunta!! Puedo meter mi cucharota en este tuto y agregarle una que otra cosilla????? Se me ocurre algo ahorita :D
     
  13. SAPINTO

    SAPINTO Nuevo usuario

    pero claro kitsch, ya somos socios de todas formas :arriba:
     
  14. Humber

    Humber Nuevo usuario

    Muy bueno pero me falta mucho que aprender para poder entender algunas cosas
     
  15. elQuique

    elQuique Usuario activo

    Sapinto, se perdieron las imagenes esta caido hammer, las tenes por ahi ?
     
  16. paolini

    paolini Nuevo usuario

    hola Sapinto: como hago para ver las imagenes??, porque veo que otras personas tampoco pueden verlas. pero no encuentro las respuestas a este mismo problema...

    gracias
    paolini
     
  17. elQuique

    elQuique Usuario activo

    paolini, bienvenido al foro.

    Acá esta el tutorial publicado:

    <a href="http://www.tallerwebmaster.com/Tutorial-Reproductor-de-Video-Adobe-Flash-c-94.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Re...Flash-c-94.html</a>
     
  18. Defor

    Defor Nuevo usuario

    hola primero que todo , como yo podria poner en ves de un boton de mute que sea un controlador de volumen, que creo que seria mejor que un boton de mute. Gracias :p
     
  19. elQuique

    elQuique Usuario activo

    Programando el botón para volumen y no para mute, lo tienes en el tutorial.
     
  20. Defor

    Defor Nuevo usuario

    ise mi reproductor de video, pero disculpame otra ves quique, pero donde esta esa parte que me dijiste, porque lo busco y no lo veo. :(


    mi reproductor de vide :D
    <a href="http://chamacodesigns.com/wow/videoplayer.html" target="_blank">http://chamacodesigns.com/wow/videoplayer.html</a>
     
  21. morocha82

    morocha82 Guest

    Hola Sapinto,

    antes que nada, muy buen tutorial, sobre todo para la gente como yo, que leeeeentamente vamos aprendiendo el manejo del Flash

    Me surgió el siguiente problema:

    Cuando publico el video solo llega hasta los 8 segundos y vuelve a empezar, cuando mi video dura 115 segundos. Cual puede ser el error?

    Te agradezco de antemano la ayuda que puedas prestarme.

    Un saludo
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta · Sobre Devandhost · Anna Telecom