Problema con Flowplayer

principianteZF · #1 (**permalink**) 19/01/2010, 09:09

Hola amigos, no sabía donde colocar este post, como es basicamente programacion javascript, lo coloco aquí, cualquier cosa lo cambian.

Tengo el siguiente problema con el video player flowplayer, si alguien lo conoce quizas me pueda ayudar.

Código HTML:

<script type="text/javascript" src="/jscript/flowplayer/example/flowplayer-3.1.4.min.js"></script>  //llamo a la libreria flowplayer
.
.
.
<script language="JavaScript">
   // Función para cargar el Flowplayer en la zona correspondiente
   flowplayer(
    "player",
    "/videos/rachael.swf",
    {
      clip: {
               autoPlay: false,
               autoBuffering: true
             }
     }
    );
</script>
<div id="player" style="display:block;width:255px;height:200px;"></div>

Basicamente quiero ver el video "rachael.swf" pero me aparece el visor negro pero no puedo ver el clip.
Si alguien sabe porque se los agradezco.
Saludos.

diegoazh · #2 (**permalink**) 21/05/2012, 03:35

Tengo exactamente el mismo problema, salvo que yo no use toda esa cadena de scripts luego de insertar en el head script con el archivo .js que viene cuando lo descargas.
Yo lo hice como indica la pagian del flowplayer en la guia de instalacion minima del mismo.

Código:

<html>
<head>
<title>flowplayer</title>
<script type='text/javascript' src='flowplayer/flowplayer-3.2.10.min.js'></script>
<!-- lo converti en una variable -->
<script>reproFLOWPLAYER='flowplayer/flowplayer-3.2.11.swf';</script>
</head>
<body>
<div id="flow_player">
<a href="http://ladoctasubastas.com.ar/prueba/video1.flv" style="display:block;margin:0 auto;height:384px;width:512px;" id="flow"></a> 
<script language="javascript">flowplayer("flow", reproFLOWPLAYER);</script>
</div>
</body>

Bueno la cosa es que se muestra el lugar que ocupa el reproductor en la pagina pero no reproduce le video.
Es más he probado con el index que viene de ejemplo cuando descargas flowplayer y que está ya configurado como para que subas la carpeta que descargaste a tu servidor y pruebes si funciona el reproductor, y lo extraño es que en dicho index sucede exactamente los mismo, se muestra un cuadrado negro pero no se reproduce nada. Mi servidor es HostGator lo aclaro por las dudas, no se si tendra algo que ver.
Espero puedan ayudarme a saber que estoy haciendo mal o si hay que configurar algo en el servidor o algo por el estilo que no este haciendo bien o se me este escapando.
Desde ya muchas gracias.

villano4 · #3 (**permalink**) 21/05/2012, 06:38

En sus codigos no veo en ninguna parte que carguen el jquery.

diegoazh · #4 (**permalink**) 21/05/2012, 09:41

Cita:

Iniciado por villano4

En sus codigos no veo en ninguna parte que carguen el jquery.

Disculpa mi ignoracia, no se mucho de programacion todavia, pero ¿como lo cargo?, o sea ¿cual es la linea de codigo que debo insertar y donde?, es decir, ¿podrías indicarla si no es mucha molestia? Desde ya muchas gracias.

diegoazh · #5 (**permalink**) 21/05/2012, 11:45

Bueno despues de lo que me dijiste inserte esto en el head espero este bien sino ya me lo dices.
Ahora bien, aún despues de haber insertado el jquery en el head la situación no a cambiado. Sigo viendo en el chrome un cuadrado negro y en el firefox solamente el espacio que ocuparía el reproductor pero nada mas solo veo el color de fondo de mi pagina.
Sinceramente no entiendo que esta pasando, ni siquiera siguiendo la indicaciones de la pagina oficial funciona, y en el index que viene de ejemplo cuando lo descargas sigue sin funcionar, agregue la misma estiqueta de script de jquery en el head y tampoco funciona. Muchas gracias de todas formas, espero alguien pueda ayudarnos.

Código:

<html>
<head>
<title>flowplayer</title>
<script type='text/javascript' src='flowplayer/flowplayer-3.2.10.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'></script>
<!-- lo converti en una variable -->
<script>reproFLOWPLAYER='flowplayer/flowplayer-3.2.11.swf';</script>
</head>
<body>
<div id="flow_player">
<a href="http://ladoctasubastas.com.ar/prueba/video1.flv" style="display:block;margin:0 auto;height:384px;width:512px;" id="flow"></a> 
<script language="javascript">flowplayer("flow", reproFLOWPLAYER);</script>
</div>
</body>

villano4 · #6 (**permalink**) 21/05/2012, 12:04

Código HTML:

<html>
<head>
	<title>Manual playlist : Flowplayer</title>
	<!-- standalone page styling. can be removed -->
	<style>
		body{
		    width:982px;
		    margin:50px auto;
		    font-family:sans-serif;
		}
		a:active { outline:none;}
		:focus { -moz-outline-style:none; }
		.palert {
		    padding: 12px;
		    color: black;
		    background-color: #ededed;
		    box-shadow: none;
		}
	</style>
	<!-- flowplayer javascript component -->
	<script src="js/flowplayer-3.2.8.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/flowplayer.playlist-3.2.8.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/playlist.css"/>
</head>

<body>
	<style>
		/* container has a background image */
		a.player {
			display:block;
			width:500px;
			height:340px;
			text-align:center;
			color:#fff;
			text-decoration:none;
			cursor:pointer;
			background:#000 url(images/h500.png) repeat-x 0 0;
			background:-moz-linear-gradient(top,
				rgba(55, 102, 152, 0.9),
				rgba(6, 6, 6, 0.9));
			-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
		}
		a.player:hover {
			background:-moz-linear-gradient(center top,
				rgba(73, 122, 173, 0.898),
				rgba(6, 6, 6, 0.898));
		}
		/* splash image */
		a.player img {
			margin-top:125px;
			border:0;
		}
		a.player { margin-top:0px; }
	</style>
	<script>
		$(function() {
			$f("player2", "flowplayer-3.2.8.swf", {
				clip: {baseUrl: 'localhost/tucarpeta'}
				}).playlist("div.petrol", {loop:true});
		});
		
	</script>
	<!-- configure entries inside playlist using standard HTML -->
	<div class="clips petrol" style="float:left">
		<!-- single playlist entry -->
		<a href="03.flv" class="first">
			Happy feet inside a car
			<span>HTTP streaming</span>
			<em>0:20 min</em>
		</a>
		<a href="04.flv">
			Park side life
			<span>HTTP streaming</span>
			<em>0:20 min</em>
		</a>
	</div>
	<!-- player container and a splash image (play button) -->
	<a class="player plain" id="player2"  style="float:left">
		<img class="button" src="images/play_text_large.png" />
	</a>
	<!-- let rest of the page float normally -->
	<br clear="all"/>
</body>
</html>

En mi caso este codigo estoy usando, junto con un playlist

diegoazh · #7 (**permalink**) 21/05/2012, 12:25

Seeeeeeeeeeee lo logre amigo, muchas gracias de todas formas, voy a mirar tu codigo para aprender como lo utilizas tu.
Bueno paso a detallar lo que he hecho, despues de renegar y renegar hice lo siguiente:
1- Fui a la pagina de jquery, http://jquery.com y descargue la version 1.7.2 (Uncompressed Code) de la siguiente ruta: http://code.jquery.com/jquery-1.7.2.js
2- Fui a http://flowplayer.org/documentation/api/index.html#download1 y descargue la version flowplayer-3.2.10.js (Uncompressed Code) del flowplayer (dato: guardas el codigo (con firefox en mi caso) dando clic derecho y de ahi en guardar pagina como, eliges la ruta guardar y listo. En ambos casos.)
3- Guarde el flowplayer-3.2.10.js en la misma carpeta donde estaba el flowplayer-3.2.10.min.js y el flowplayer-3.2.11.swf y para el jquery cree una carpeta aparte y guarde alli el jquery-1.7.2.js
4- Luego cambie las rutas en el head, lo subi a mi servidor y recargue la pagina y listo el video FUNCIONO.

Código:

<html>
<head>
<title>flowplayer</title>
<script type='text/javascript' src='flowplayer/flowplayer-3.2.10.js'></script>
<script type='text/javascript' src='jquery/jquery-1.7.2.js'></script>
<!-- lo converti en una variable -->
<script>reproFLOWPLAYER='flowplayer/flowplayer-3.2.11.swf';</script>
</head>
<body>
<div id="flow_player">
<a href="video1.flv" style="display:block;margin:0 auto;height:384px;width:512px;" id="player"></a> 
<script language="javascript">flowplayer("player", reproFLOWPLAYER);</script>
</div>
</body>

Nota: Estuve probando distintas cosas y una de ellas fue cambiar la ruta del video por eso ahora esta al mismo nivel que el index y varia con respecto al codigo que publique anteriormente, pero ello no tiene nada que ver con el funcionamiento, anda todo a la perfeccion.

¡¡¡¡¡¡¡¡¡Muchas gracias de todas formas!!!!!!!!!!!!!!!