[TUTORIAL] Reproductor de video II

...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
<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='clsid27CDB6E-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:

 

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:

 

Excelente :clapping:

 

Muchas gracias por el aporte, Sapinto.

 

Muy bueno lo dije en el uno y lo repito hoy porque lo vi de nuevo al 1 y 2

 

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?

 

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>

 

Impresionante!!!! Impresionante!!! A los super favs de ya!!

 

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

 

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.

 

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

 

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

 

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

 

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

 

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

 

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>

 

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

 

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

 

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
<a href="http://chamacodesigns.com/wow/videoplayer.html" target="_blank">http://chamacodesigns.com/wow/videoplayer.html</a>

 

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