Alguien podria hecharme una mano porfavor
estoy atascado
Hare un breve resumen:
1-Tengo una pagina con un reproductor y 2 links.
2-quiero que cuando aprete al link 1 se me cargue el video 1 ( la BBDD esta montada con las ID de los videos y rutas etc.. ).
3-Quiero que me cargue el video pero sin refresco sino por AJAX, para eso tengo
una funcion que os pondre mas abajo.
4-Tengo otra pagina PHP que en principio me consulta en la BBDD y me devuelve el valor a el DIV de mi reproductor.
Codigos: Tengo este codigo que en teoria tendria que llamar a la funcion ajax
( Es el video 1 y 2 pero no se como poner para que tengan ID 1 e ID 2): Código PHP:
<a href="javascript:fcargar('vervideos.php?idvideo=<? echo $Rs_video->idvideo;?>', 'nombre del div donde se mostrara el video');" target="navi" onclick="function fcargar">
<p>LOL1</p>
<p class="time"><? $duracionvideo; ?></p>
</a>
<a href="javascript:fcargar('vervideos.php?idvideo=<? echo $Rs_video->idvideo;?>', 'nombre del div donde se mostrara el video');" target="FlowPlayer">
<p>LOL2</p>
<p class="time"><? $duracionvideo; ?></p>
</a>
Mi funcion AJAX ( Querria saber si tengo que cambiar el nombre de lo que pone en el codigo
como pro ejemplo [ Pagina_requerida, o Items ] ): Código PHP:
<script>
function fcargar(vervideos.php, cargadero){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){ // en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, cargadero)
}
pagina_requerida.open('GET', vervideos.php, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, items){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(items).innerHTML=pagina_requerida.responseText
window.scrollTo(100,200)
}
</script>
Mi pagina vervideos.php en la que hago la consulta: Código PHP:
<div id="cargadero">
<?
$link = mysql_connect("localhost", "root");
$connect=mysql_select_db("deporte",$link);
$Rs_video = mysql_query("SELECT Ruta FROM videos LIMIT 5");
?>
</div>
Y la pagina Principal donde tengo el reproductor, funcion Ajax y los links es asi: Código PHP:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
/* player and playlist go side by side */
#player, div.playlist {
float:left;
margin-right:20px;
}
div.playlist {
width:150px;
}
/* player dimensions */
#player, #player img {
display:block;
width:300px;
height:240px;
border:0px;
}
/* play button on top of splash image */
div.play {
background:url(../img/btn/play.png) no-repeat;
width:50px;
height:50px;
position:relative;
top:-140px;
left:125px;
opacity:0.9;
margin-bottom:-50px;
}
div.play:hover {
opacity:1.0;
}
/* single playlist item */
div.items a {
background:url(../tools/img/block.jpg) no-repeat;
width:150px;
height:68px;
display:block;
text-decoration:none;
}
div.items p {
font-size:11px;
width:130px;
padding:8px 0 0 12px;
margin:0px;
}
div.items p.time {
padding-top:0px;
color:#777;
margin-top:5px;
}
/* item stages: normal, hover, playing, paused */
div.items a:hover {
background-position:0 -68px;
}
div.items a.playing, div.items a.paused {
color:#000;
}
div.items a.playing {
background-position:0 -136px;
}
div.items a.paused {
background-position:0 -68px;
}
/* small navigational dots */
div.navi {
width:60px;
float:left;
margin:10px 0 0 50px;
}
div.navi span {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(../tools/img/dots.png) 0 0 no-repeat;
cursor:pointer;
}
div.navi span:hover {
background-position:0 -8px;
}
div.navi span.active {
background-position:0 -16px;
}
</style>
<?
$caida ="caida.mov";
?>
<script>
// setup scrollable playlist when page is scriptable
$(document).ready(function() {
// setup Flowplayer playlist from <div.items/>
$("div.items").playlist(
// flash parameters
"FlowPlayerLP.swf",
// flowplayer configuration
{initialScale:'scale'},
// playlist configuration
{loop:true}
);
// make playlist scrollable
$("div.playlist").scrollable({size:3});
});
</script>
</head>
<body>
<?
$link = mysql_connect("localhost", "root");
$connect=mysql_select_db("deporte",$link);
$query= mysql_query("SELECT Ruta FROM videos WHERE ID = 59");
$row=mysql_fetch_array($query);
if(mysql_num_rows($query)!=0){
echo $row["Ruta"];
}
?>
<div class="playlist">
<!-- playlist items -->
<div class="items">
<a href="caidas.flv" target="FlowPlayer">
<p>Video1</p>
<p class="time">1:32 sec</p>
</a>
<a href="caida.mov" target="FlowPlayer" >
<p>Video 2</p>
<p class="time">1:32 sec</p>
</a>
<!-- ... rest of the items goes here ... -->
</div>
<!-- navigator is auto generated inside this tag -->
<div class="navi">
<object type="application/x-shockwave-flash" name="FlowPlayer" width="400" height="300" id="FlowPlayer" data="FlowPlayerLP.swf" style="margin-left:300; position:absolute; left: 398px; top: 8px; allowFullScreen:true;">
<param name="scale" value="noScale"/>
<param name="wmode" value="transparent"/>
<param name="allowFullScreen" value="true" />
<param name="quality" value="high"/>
<param name="flashvars" value="config={
showPlayList: true,
showPlayListButtons: true,
loop: false,sa
autoPlay:false,
initialScale: 'fit',
useNativeFullScreen: true,
fullScreenScriptURL:'fullscreen.js',
playList: [
{ url:'<? echo $row["Ruta"] ?>',
name:' Caidas tontas ROFL' },
]
}"/>
</object>
</div>
</div>
</body>
</html>