Buenas!
Este es el primer post que publico sobre programación y sistemas desarrollados con un buen funcionamiento =) y como ahorita esta de moda eso de los videos y musica pues aquà te explicare como puedes desarrollar tu propia página web con sistema de reproducción de videos y lo mejor de todo es que también funciona con musica mp3 asi que hasta puedes crear tu propio ITunes en linea =) exelente no? bueno empezamos.
Este sistemita lo cree hace como un año y ya tenia ganas de compartirlo pero no sabia donde hasta que se me ocurrio este blog 
Bueno pues en ese entonces yo progamaba en ASP y pues el sistema por lo tanto esta desarrollado con ese lenguaje... pero si alguien le interesa tenerlo en PHP que me diga y pues intentare traducirlo y publicarlo
1. Creamos un index.asp donde tendremos el sistema de busqueda de videos y mp3 y ahi el ususario seleccionará cual video o canción desea reproducir. Al darle clic al titulo o imagen, te mandara a otra página [video.asp] donde tendremos el reproductor (que por cierto es de Flash) y ahà en el mismo reproductor podremos reproducir la canción o video seleccionado.
2. En el index.asp tendremos lo siguiente:
HTML:
-
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
-
<!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">
-
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
-
-
<!--
-
body,td,th {
-
font-family: Arial, Helvetica, sans-serif;
-
color: #990033;
-
}
-
body {
-
background-color:#FBFBFB;
-
margin-left: 15px;
-
margin-right: 15px;
-
}
-
a:link {
-
color: #990033;
-
}
-
a:visited {
-
color: #CC0000;
-
}
-
.style2 {
-
color: #990000;
-
font-weight: bold;
-
}
-
-->
-
</style>
-
</head>
-
-
-
<!--
-
function vacio(v) {
-
for (i=0; i<v.length; i++)
-
{
-
if (v.charAt(i)!=" ")
-
{ return true }
-
}
-
alert("Introduce una busqueda correcta");
-
document.busqueda.video.value="";
-
document.busqueda.video.focus();
-
return false
-
}
-
//-->
-
</script>
-
-
-
<!-- #include file="conexion.asp" -->
-
<table align="center" border="0" width="80%"><tr align="center" valign="middle"><td align="center" valign="middle">
-
<table align="left" border="0" width="100%"><tr align="left" valign="middle"><td width="644" align="left" valign="middle">
-
<img src="cabeza.jpg" width="608" height="160" />
-
</td></tr></table>
-
</td></tr>
-
-
<table align="left" border="0" width="100%"><tr align="center" valign="middle"><td align="center" valign="middle">
-
<table align="rigth" border="0" width="100%"><tr align="center" valign="middle">
-
-
<td align="center" valign="middle" width="6%">
-
<a href="index.asp"><span class="style2"><font size="2" face="Arial, Helvetica, sans-serif">Explorar
</font></span></a>
-
</td>
-
<td align="center" valign="middle" width="6%">
-
<a href="subir.asp"><span class="style2"><font size="2" face="Arial, Helvetica, sans-serif">Subir
</font></span></a>
-
</td>
-
</tr></table>
-
-
<legend><strong><font color="#990033" size="3" face="Arial, Helvetica, sans-serif">Busqueda
</font></strong></legend>
-
<form action="index.asp" method="post" name="busqueda" id="busqueda" onsubmit="return vacio(document.busqueda.video.value)">
-
-
<input type="radio" name="tipo" value="FLV" />
-
<font color="#990033" size="2" face="Arial, Helvetica, sans-serif">Video
</font>
-
</td></tr>
-
<tr><td align="left" valign="middle">
-
<input type="radio" name="tipo" value="MP3" />
-
<font color="#990033" size="2" face="Arial, Helvetica, sans-serif">Audio
</font>
-
</td></tr>
-
-
<input type="text" name="video" />
-
-
-
<!--
-
document.busqueda.video.focus();
-
//-->
-
</script>
-
-
<input type="submit" name="buscar" value="Buscar" />
-
</td></tr></table>
-
</form>
-
</fieldset>
-
-
<%
-
if (request.form("buscar")="Buscar") then
-
vid=trim(request.form("video"))
-
tipo=request.form("tipo")
-
a=0
-
ban=0
-
Dim palabras(99999)
-
i=-1
-
-
while (a<len(vid)) 'buscamos las palabras en la BD
-
i=i+1
-
ban1=0
-
video=""
-
while ((ban1=0) and (a<len(vid)))'sakamos palabra por palabra
-
a=a+1
-
if (mid(vid,a,1)<>" ") then 'si es una letra (sin espacios) entonces
-
video=video & mid(vid,a,1)
-
ban1=0
-
else
-
if video="" then
-
ban1=0
-
else
-
ban1=1
-
end if
-
end if
-
wend
-
video=replace(video,"'","\t8t\")
-
video=replace(video,"%","\p8p\")
-
palabras(i)=video
-
wend
-
-
'hacemos consulta a la BD
-
if tipo="" then
-
strSQL = "SELECT * FROM videos WHERE video LIKE '%" & palabras(0) & "%'"
-
else
-
if tipo="FLV" then
-
strSQL = "SELECT * FROM videos WHERE tipo='FLV' AND video LIKE '%" & palabras(0) & "%'"
-
else
-
if tipo="MP3" then
-
strSQL = "SELECT * FROM videos WHERE tipo='MP3' AND video LIKE '%" & palabras(0) & "%'"
-
end if
-
end if
-
end if
-
-
for j=1 to i
-
strSQL = strSQL & " AND video LIKE '%" & palabras(j) & "%'"
-
next
-
strSQL = strSQL & " ORDER BY video"
-
Set objRS = conn.Execute(strSQL)
-
Set contador = conn.Execute(strSQL) 'cuento el total de resultados
-
-
'Ciclo para contar recultados
-
if (not contador.Eof) then
-
while not contador.Eof
-
cr=cr+1
-
contador.movenext
-
wend
-
else
-
cr=0
-
end if
-
-
if (not objRS.Eof) then 'si hay algun resultado
-
%>
-
<br><br>
-
<table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
-
<%
-
if tipo="" then
-
response.write("Se encontraron " & cr & " resultados para <b>'" & vid & "'")
-
else
-
if tipo="FLV" then
-
response.write("Se encontraron " & cr & " resultados de video para <b>'" & vid & "'")
-
else
-
if tipo="MP3" then
-
response.write("Se encontraron " & cr & " resultados de audio para <b>'" & vid & "'")
-
end if
-
end if
-
end if
-
%>
-
</b></font></td></tr></table>
-
<hr color="#990000" width="100%" align="right" size="2"/>
-
<%
-
while not objRS.Eof 'Mientras no llegue al final de la tabla
-
%>
-
<table width="581" border="0">
-
<tr>
-
<td width="101" height="103"><% response.write("<a href='video.asp?tipo=" & objRS("tipo") & "&video=" & objRS("link") & "'><img border='0' src='video" & objRS("tipo") & ".jpg'/>")%></a></td>
-
<td width="470">
-
<table width="475" border="0">
-
<tr>
-
<td width=100% height="20" bgcolor="#E8E8E8" align="left" valign="middle"><span class="style2"><font size="2" face="Arial, Helvetica, sans-serif"><% response.write("<a href='video.asp?tipo=" & objRS("tipo") & "&video=" & objRS("link") & "'>" & objRS("video")) %></font></span></a></td>
-
</tr>
-
<tr>
-
<td width=100% height="95" align="left" valign="middle"><font color="#990033" size="2" face="Arial, Helvetica, sans-serif">
-
<% response.write(objRS("descripcion")) %></font></td>
-
</tr>
-
</table>
-
</td>
-
</tr>
-
<tr height="4">
-
<td height="11"> </td>
-
</tr>
-
</table>
-
-
-
<%
-
objRS.movenext
-
wend 'cierro ciclo de impresion de resultados
-
else 'sino encontro resultados
-
%>
-
<br>
-
<br>
-
<table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
-
<%
-
if tipo="" then
-
response.write("Se encontraron " & cr & " resultados para <b>'" & vid & "'")
-
else
-
if tipo="FLV" then
-
response.write("Se encontraron " & cr & " resultados de video para <b>'" & vid & "'")
-
else
-
if tipo="MP3" then
-
response.write("Se encontraron " & cr & " resultados de audio para <b>'" & vid & "'")
-
end if
-
end if
-
end if
-
%>
-
</b></font></td></tr></table>
-
<hr color="#990000" width="100%" align="right" size="2"/>
-
<p>
-
<%
-
end if
-
conn.Close
-
set objRS = nothing
-
set conn = nothing
-
end if
-
%>
-
</p>
-
<table border="0" width="100%"><tr height="15" align="right"><td align="rigth" valign="middle">
-
<img src="pie.jpg" height="191" />
-
</td>
-
</tr></table>
-
-
</td></tr></table>
-
</td></tr></table>
-
</body>
-
</html>
No te asustes! lo explicaré paso a paso:
Como podras ver tengo un codigo JavaScript el cual utilizo para la validacion del cuadro de busqueda; para evitar que el usuario intente buscar "nada".. es decir que si introduce puros espacios en blanco, nuestro codigo Javascript le indicara al usuario que debe introducir una busqueda correcta
JavaScript:
-
function vacio(v) {
-
for (i=0; i<v.length; i++)
-
{
-
if (v.charAt(i)!=" ")
-
{ return true }
-
}
-
alert("Introduce una busqueda correcta");
-
document.busqueda.video.value="";
-
document.busqueda.video.focus();
-
return false
-
}
Contiuando con nuestro codigo de index.asp veremos que estamos incluyendo un archivo [conexion.asp] el cual contiene lo siguiente:
ASP:
-
set conn = Server.Createobject("adodb.connection")
-
conn.open ("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("bd\bd1.mdb"))
Esto porque necesitaremos una base de datos donde unicamente guardaremos la referencia de donde tenemos los videos y canciones almacenados; es decir: Nostros guardaremos todos los archivos [video.flv y cancion.mp3] en dos distintas carpetas llamadas "videos" y "mp3" y en la Base de Datos llamada "bd1.mdb" que estara dentro de la carpeta "BD" tendremos unicamente una tabla llamada "videos" con lo siguiente

Como podras observar tenemos 5 campos:
id: es nuestro campo unico que nos sirve para tener control de los registros (es muy util cuando deseamos obetener solo el primer registro o el ultimo)
video: contiene el nombre del video o la cancion
link: contiene la direccion donde esta almacenada esa cancion.
descripcion: es una descripcion de la cancion o video
tipo: este campo nos indica si ese archivo es video [FLV] o cancion [MP3]
Otra cosa importante a resaltar es de que en la tabla (especificamente en el campo de "video") estoy utilizando un conteo creciente (por ejemplo: v6.flv, v7.flv...) esto lo hago debido a que de esa manera es mas facil su utilizacion.
Sigamos con index.asp
Pues para entender el HTML ya debes saber lo basico del html.. de no ser asi, aquà te dejo un Link hacia un tutorial de HTML muy bueno... ya que lo leas, entonces prosigues con el index.asp
Como podras ver en aproximadamente en la linea 64 tenemos un link hacia un archivo "subir.asp" el cual será nuestra página donde el usuario podrá subir sus propios videos... este archivo lo explicare mas adelante..
Despues tenemos un Fielset que es donde he colocado el cuadro de busqueda de los videos o canciones...
Dentro de este fieldset tenemos un Form el cual al ser enviado nos regresara denuevo al index.asp... ya veras porque..
Este codigo javascript es unicamente para que al iniciar nuestra página, nuestro cuadro de texto de busqueda tenga el foco
JavaScript:
-
document.busqueda.video.focus();
Enseguida tenemos un codigo ASP
ASP:
-
if (request.form("buscar")="Buscar") then
-
vid=trim(request.form("video"))
-
tipo=request.form("tipo")
-
a=0
-
ban=0
-
Dim palabras(99999)
-
i=-1
-
-
while (a<len(vid)) 'buscamos las palabras en la BD
-
i=i+1
-
ban1=0
-
video=""
-
while ((ban1=0) and (a<len(vid)))'sakamos palabra por palabra
-
a=a+1
-
if (mid(vid,a,1)<>" ") then 'si es una letra (sin espacios) entonces
-
video=video & mid(vid,a,1)
-
ban1=0
-
else
-
if video="" then
-
ban1=0
-
else
-
ban1=1
-
end if
-
end if
-
wend
-
video=replace(video,"'","\t8t\")
-
video=replace(video,"%","\p8p\")
-
palabras(i)=video
-
wend
-
-
'hacemos consulta a la BD
-
if tipo="" then
-
strSQL = "SELECT * FROM videos WHERE video LIKE '%" & palabras(0) & "%'"
-
else
-
if tipo="FLV" then
-
strSQL = "SELECT * FROM videos WHERE tipo='FLV' AND video LIKE '%" & palabras(0) & "%'"
-
else
-
if tipo="MP3" then
-
strSQL = "SELECT * FROM videos WHERE tipo='MP3' AND video LIKE '%" & palabras(0) & "%'"
-
end if
-
end if
-
end if
-
-
for j=1 to i
-
strSQL = strSQL & " AND video LIKE '%" & palabras(j) & "%'"
-
next
-
strSQL = strSQL & " ORDER BY video"
-
Set objRS = conn.Execute(strSQL)
-
Set contador = conn.Execute(strSQL) 'cuento el total de resultados
-
-
'Ciclo para contar recultados
-
if (not contador.Eof) then
-
while not contador.Eof
-
cr=cr+1
-
contador.movenext
-
wend
-
else
-
cr=0
-
end if
-
-
if (not objRS.Eof) then 'si hay algun resultado
-
'imprimimos los resultados en una lista [ver index.php linea 155]
Como podemos ver, este pedazo de codigo lo unico que hace es recibir la cadena a buscar, la divide en palabras y lo guarda en un array llamado "palabras" y despues crea una consulta que obtenga los registros que contengan esas palabras, despues ejecuta la sentencia SQL y obtiene los resultados, tambien hay un ciclo que solo se utiliza para contar el total de registros obtenenido
Despues tenemos codigo insertado en el html, en la lista de resultados... lo que hacemos es que por cada video o cancion que cumpla con la sentencia SQL imprimiremos su titulo, descripcion y una imagen indicando que es video o cancion.. cada una de estas cosas con un link hacia video.asp enviando por el metodo GET, el tipo de archivo que es [FLV o MP3] y el nombre del video.. lo vemos a continuacion
HTML:
-
<table width="581" border="0">
-
-
<td width="101" height="103"><% response.write("<a href='video.asp?tipo=" & objRS("tipo") & "&video=" & objRS("link") & "'><img border='0' src='video" & objRS("tipo") & ".jpg'/>")%></a></td>
-
<td width="470">
-
<table width="475" border="0">
-
<tr>
-
<td width=100% height="20
" bgcolor="#E8E8E8
" align="left
" valign="middle
"><span class="style2
"><font size="2
" face="Arial, Helvetica, sans-serif
"><% response.write("<a href=
'video.asp?tipo=" & objRS("tipo") & "&video=" & objRS("link") & "'>"
& objRS("video")) %></font></span></a></td>
-
</tr>
-
<tr>
-
<td width=100% height="95" align="left" valign="middle"><font color="#990033" size="2" face="Arial, Helvetica, sans-serif">
-
<% response.write(objRS("descripcion")) %></font></td>
-
</tr>
-
</table>
-
</td>
-
</tr>
-
<tr height="4">
-
<td height="11"> </td>
-
</tr>
-
</table>
Este codigo esta dentro del ciclo que recorre registro resultante por registro resultante... es decir que si se encontraron 10 videos que coincidan con las palabras "futbol" y "barcelona" entonces este codigo se imprimira 10 veces...
Despues de esto tenemos el fin del ciclo y el else de la pregunta inicial (if (not objRS.Eof))
ASP:
-
objRS.movenext
-
wend 'cierro ciclo de impresion de resultados
-
else 'sino encontro resultados
Si no encontro resultados entonces imprimimos mensaje de "0 resultados que coincidan con su busqueda"
HTML:
-
<table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
-
<%
-
if tipo="" then
-
response.write("Se encontraron " & cr & " resultados para <b>'"