insertar reproductor de video en pagina web

Anne_J · #1 (**permalink**) 15/09/2011, 13:15

Hola!

En primer lugar decir que soy nueva en este mundo y tengo muuuchas cosas que aprender..

Resulta que tengo un par de videos en una carpeta y lo que quiero es que cuando en mi html pulse en el link "ver video 1" pues de pueda ver el video desde la web mismo (y si pulso el link "ver video 2" pues lo mismo con su respectivo video...

Se me ocurren dos opciones, el problema es que no sé implementarlos...:

1) cuando pulse en link se abrá una ventana (tipo pop-up) que será el reproductor de video, y el video empezará a mostrarse.

2) tener incrustado en la html un reproductor de video, y que cuando pulse en el link se empiece a ejecutar su respectivo video.

La primera opción diría que no es muy complicada, pero no sé...ayuda por favorrrr jijiij

Gracias!

matt_1985 · #2 (**permalink**) 15/09/2011, 15:12

Anne_J ,

usando la etiqueta video de html5 , quedaria algo como esto ,

Código HTML:

Ver original<video id="conejito" controls preload="metadata">
                <source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
                <source src="video.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

otra alternativa es subir el video a youtube o vimeo y pegar el embed del codigo algo como esto :

Código HTML:

Ver original<iframe src="http://player.vimeo.com/video/27561214?color=ff0179" width="400" height="225" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><p><a href="http://vimeo.com/27561214">The Killing Joke</a> from <a href="http://vimeo.com/sebalopez">sebastian lopez</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

saludos

emprear · #3 (**permalink**) 15/09/2011, 17:34

me quedan algunas dudas de tu planteo, pero por lo que entiendo, vos tenes los reproductores, lo que querés es que se vea uno u otro al apretar un link, y siempre en la misma página.
como sos nueva, creo que la solución más simple es que pongas tus reproductores dentor de dos divs con la propiedad display:none; de css y que tus links, que bien pueden ser dos imágenes a manera de botones, cambien la propiedad por disply:block; con un minimo de javascript

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alternar Video</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
 
/* ---------------------------- */
/* MostrarOcultar Capas Multiples       */
/* ---------------------------- */
 
function m_oCapas() { 
  var i,a,v,elemento,cond=m_oCapas.arguments;
  for (i=0; i<(cond.length-2); i+=3) 
  with (document) if (getElementById && ((elemento=getElementById(cond[i]))!=null)) { v=cond[i+2];
    if (elemento.style) { elemento=elemento.style; v=(v=='ver')?'block':(v=='ocultar')?'none':v; }
    elemento.display=v; }
}
 
//]]>
</script>
</head>
<body>
<p>
<button onclick="m_oCapas('video_uno','','ver','video_dos','','ocultar');">Ver video 1</button> 
<button onclick="m_oCapas('video_uno','','ocultar','video_dos','','ver');">Ver video 2</button>
</p>
<div id="video_uno" style="display: none; width: 300px; height: 300px; border: solid 1px #000;">
código del reproductor 1
</div>
<div id="video_dos" style="display: none; width: 300px; height: 300px; border: solid 1px #000;">
código del reproductor 2
</div>
</body>
</html>

Hay mejores opciones, Ajax, php, pero creo que con esto te tendría que bastar

Saludos

Anne_J · #4 (**permalink**) 16/09/2011, 03:59

Hola!!

Mirad, he seguido avanzando un poco con el desarrollo y tengo esto:

*Lo que quiero hacer es que el argumento que recoja en la función llamada "nombreFuncion" pasarselo al reproductor, sólo me falta eso y estará terminado (creo)!!

* Pero no consigo hacerlo. Quiero meter la variable "variable" aquí:
so.addVariable('file','RUBIK_en_1_minuto.flv');

Me podriais ayudar??

Gracias!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script type="text/javascript">

var variable;
function nombreFuncion (nombre){
alert(nombre);
variable = nombre;
var anne = document.getElementById('reproductor');
alert("Esto aparece:: " + anne);
}

var so = new SWFObject('mediaplayer.swf','mpl','400','310','8') ;
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','400');
so.addVariable('file','variable');
so.addVariable('screencolor','0x000000');
so.addVariable('file','RUBIK_en_1_minuto.flv');
so.write('player');
</script>
</head>
<body>
<div align="center">
<center></center>
</div>
<h1>Panel de videos</h1>
<h2>Elija el video que quiere ver y éste se ejecutará en el reproductor.</h2>
<embed src="mediaplayer.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="height=310&width=400&file=RUBIK _en_1_minuto.flv&screencolor=0x000000" height="310" width="400">
<p> Madrid de noche: <a href="" onclick="nombreFuncion('madrid');"> ver video </a></p>

<p> Barcelona de día: <a href="" onclick="nombreFuncion('RUBIK_en_1_minuto.flv');"> ver video </a></p>
</body></html>

emprear · #5 (**permalink**) 16/09/2011, 08:10

Si, parece que te falta bastante que aprender, estás mezclando muchas cosas, y ademas parece ser que tu ejemplo lo sacaste de http://www.publiblanes.net/video_flv...lv/player.html, o alguna página similar, donde por cierto está bastante mal explicado, sobre todo el uso de swfobject.
Mucho más simple haber usado lo que te propuse en un principio, que era un código más limpio y cumplía exactamente con la misma función, lo probaste?

De todas maneras si querés experimentar con tu sistema, lo que tendrías que hacer es basicamente esto para pasar variables
http://foros.emprear.com/jwv3/

Pero te anticipo que en IE funciona mal

Saludos

Anne_J · #6 (**permalink**) 17/09/2011, 05:04

Hola emprear,

Cita:

Iniciado por emprear

Si, parece que te falta bastante que aprender, estás mezclando muchas cosas

Sí, efectivamente, ya sé que tengo mucho que aprender...jajaja.

Cita:

Iniciado por emprear

Mucho más simple haber usado lo que te propuse en un principio, que era un código más limpio y cumplía exactamente con la misma función, lo probaste?

Sí que lo probé, pero la verdad que no entendía el código y por eso no lo queríá hacer así.

PEEEEEEEEEEEEERO AL FINAL SIGUIENDO A TU SEGUNDO CONSEJO LO HE CONSEGUIDO! Y TE DOY LAS GRACIASSSSSS

Pero me quedo con una duda...tal y como tú me decias con IE funciona mal...¿a qué es debido?¿lo puedo solucionar de alguna manera?

emprear · #7 (**permalink**) 17/09/2011, 09:59

@Anne_J

No sabría decirte porque no funciona, la consola de erroes no erroja mensaje alguno, además el proclema es que funciona parcialmente, cuando recien ingresas a la página, y abris un video, todo ok, pero cuando repetis la operación, solo se escucha el audio del video (tené en cuenta que en los videos que dejé de ejemplo, hay uno que no tiene audio, asi que no ves ni escuchas nada. Puede que sea una incopatibilidad del reproductor JWV Player, o se esa versión al menos, que es un poco vieja.

Además me quedé pensando que si no funciona bien en IE, la script debe ser descartada. No se puede dejar a los usuarios de IE afuera.
Como te señalé hay otras formas, yo en particular para eso uso php.

Por otro lado cuando

Cita:

Sí que lo probé, pero la verdad que no entendía el código y por eso no lo queríá hacer así.

sencillamente vóves a preguntar, y si está a mi alcance o se justifica te responderé.

Para terminar, hice una versión nueva, con javascript, y sin el uso de swfobject.js
Este si funciona en todas partes y no es dificil de implementar. Incluso si analizás el código, te vas a dar cuenta de que se le pueden introducir mejoras para pasar más parámetros a la script

Aqui te dejo la demo,

http://foros.emprear.com/jwv3/reproductor4.html

saludos

Anne_J · #8 (**permalink**) 19/09/2011, 05:36

Buenas!

Joe, me estoy volviendo loca con un sencillo html, sq no entiendo porque se comporta así...el código es demasiado fácil y no puedo comprender xq me hace esto:

Resulta que cuando le doy al link "ver vídeo" en el método javascript me creo el reproductor (mirando tu último ejemplo) y cuando lo ejecuto aparece un segundo y luego vuelve a desaparecer!!

Te pongo aquí el html y ayudame pleaseeeeeee

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
//<![CDATA[
function elegirVideo(code){

var anne = "<object class=\"playerpreview\" type=\"application/x-shockwave-flash\" data=\"player_flv_maxi.swf\" width=\"420\" height=\"340\">";
anne += "<param name=\"movie\" value=\"player_flv_maxi.swf\"\/>";
anne += "<param name=\"allowFullScreen\" value=\"true\" \/>";
anne += "<param name=\"FlashVars\" value=\"flv=RUBIK_en_1_minuto.flv&width=400&height =300&showstop=1&showvolume=1&showtime=1&showfullsc reen=1&bgcolor1=189ca8&bgcolor2=085c68&playercolor =085c68&buttoncolor=ffff33&buttonovercolor=ffffff& slidercolor1=dddddd\" \/>";
anne += "<\/object>";

alert("el objeto::: " + anne);

document.getElementById('reproductor2').innerHTML= anne;

}
//]]>
</script>

</head>
<body>
<p> Barcelona de día: <a href="" onclick="elegirVideo('RUBIK_en_1_minuto.flv');"> ver video </a></p>

<div id="reproductor2">

</div>

<div id="reproductor"><p>Esto es lo miso que lo que va a sacar el alert cuando se pulse en "ver video". </p>
<object class="playerpreview" type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="420" height="340">
<param name="movie" value="player_flv_maxi.swf"/>
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=RUBIK_en_1_minuto.flv&width=400&height= 300&showstop=1&showvolume=1&showtime=1&showfullscr een=1&bgcolor1=189ca8&bgcolor2=085c68&playercolor= 085c68&buttoncolor=ffff33&buttonovercolor=ffffff&s lidercolor1=dddddd" />
</object>
</body>
</html>

P.D: el fichero "player_flv_maxi.swf" está en la misma carpeta

emprear · #9 (**permalink**) 19/09/2011, 07:02

Anne_J:
varias cosas
1. Cuando muestres código, usa el "highlight" del editor, porque si no el código se deforma(se agregan espacios en blanco, etc...,)
2. Estas ejecutando el click sobre un <a>, pero tu href está vació, ponele aunque sea un marcador <a href="#">, o mejor aún, ponelo sobre otro elemento, un <spam> o <p> y en el css le das cursor:pointer; para que te genere la manito al hacer hover.
3. Si pones el nombre del video en el mismo javascript, no tiene mucho sentido, para eso le estás pasando un parámetro.
4. Loco, me vas a volver a mi... Por qué me cambiaste de reproductor !!!!, sucede que, cuando corrijas la script te vas a llevar la sorpresa que en IE no te va a funcionar bien. El video carga, pero los controles no se muestran
5. Sin embargo te aclaro que ese reproductor es muy bueno y muy configurable, tambien tenes un modelo "multi" para mostrar varios videos como una lista. Te sugiero que utilices el "generador" de código para ver todas las funciones
http://flv-player.net/players/maxi/generator/

Y si no, usa el reproductor de mi ejemplo anterior, que como ya viste, si funciona
http://foros.emprear.com/jwv3/reproductor4.html
saludos

Anne_J · #10 (**permalink**) 20/09/2011, 03:12

una #!! por eso me pasaba eso...muchas gracias emprear!

¿Sabes que problema tengo ahora? que el formato de los videos que quiero mostrar es ".m1v" ... y esos reproductores no los pueden reproducir (por las pruebas que he hecho yo...)

emprear · #11 (**permalink**) 20/09/2011, 06:40

Anne_J:

El formato m1v no es más que un archivo mpg1 sin audio, es uno de los códecs más básicos, tendrias que convertirlo a flv, dependiendo del tamaño de tus archivos, que supongo que si los pensa poner en la web no son tan grandes, tendrías 2 opciones, bajarte un software de conversión
probá con este (para windows)
http://www.dvdvideosoft.com/products...-Converter.htm

que hasta te crea un reproductor para la web
pero dos observaciones. cuando instales el programa decile que no a la instalacion de las barras de herramientas para IE/Firefox. Y antes de hacer la conversión, tenes que hacer una pequeña trampa, renombrar los archivos m1v con la extensión mpg. En el formato de salida pone flv (mira que tambien hay una opcion para pasarlo a swf)

La otra es usar un conversor de videos online
http://www.convertfiles.com/
ahi tambien hay que hacer el cambio de extensión

Saludos