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 :P
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:

PLAIN TEXT
HTML:
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>Your Video</title>
  7. <style type="text/css">
  8. <!--
  9. body,td,th {
  10.     font-family: Arial, Helvetica, sans-serif;
  11.     color: #990033;
  12. }
  13. body {
  14.     background-color:#FBFBFB;
  15.     margin-left: 15px;
  16.     margin-right: 15px;
  17. }
  18. a:link {
  19.     color: #990033;
  20. }
  21. a:visited {
  22.     color: #CC0000;
  23. }
  24. .style2 {
  25.     color: #990000;
  26.     font-weight: bold;
  27. }
  29. -->
  30. </style>
  31. </head>
  32.  
  33. <script type="text/javascript">
  34. <!--
  35. function vacio(v) {
  36.   for (i=0; i<v.length; i++)
  37.     {
  38.      if (v.charAt(i)!=" ")
  39.        { return true }
  40.     }
  41.   alert("Introduce una busqueda correcta");
  42.   document.busqueda.video.value="";
  43.   document.busqueda.video.focus();
  44.   return false
  45. }
  46. //-->
  47. </script>
  48.  
  50. <!-- #include file="conexion.asp" -->
  51. <table align="center" border="0" width="80%"><tr align="center" valign="middle"><td align="center" valign="middle">
  52.    <table align="left" border="0" width="100%"><tr align="left" valign="middle"><td width="644" align="left" valign="middle">
  53.      <img src="cabeza.jpg" width="608" height="160" />
  54.    </td></tr></table>
  55. </td></tr>
  57. <table align="left" border="0" width="100%"><tr align="center" valign="middle"><td align="center" valign="middle">
  58.   <table align="rigth" border="0" width="100%"><tr align="center" valign="middle">
  59.    <td width="88%"></td>
  60.     <td align="center" valign="middle" width="6%">
  61.       <a href="index.asp"><span class="style2"><font size="2" face="Arial, Helvetica, sans-serif">Explorar</font></span></a>
  62.     </td>
  63.     <td align="center" valign="middle" width="6%">
  64.       <a href="subir.asp"><span class="style2"><font size="2" face="Arial, Helvetica, sans-serif">Subir</font></span></a>
  65.     </td>
  66.   </tr></table>
  68.   <legend><strong><font color="#990033" size="3" face="Arial, Helvetica, sans-serif">Busqueda</font></strong></legend>
  69.   <form action="index.asp" method="post" name="busqueda" id="busqueda" onsubmit="return vacio(document.busqueda.video.value)">
  70.    <table><tr><td align="left" valign="middle">
  71.     <input type="radio" name="tipo" value="FLV" />
  72.     <font color="#990033" size="2" face="Arial, Helvetica, sans-serif">Video</font>
  73.     </td></tr>
  74.     <tr><td align="left" valign="middle">
  75.     <input type="radio" name="tipo" value="MP3" />
  76.     <font color="#990033" size="2" face="Arial, Helvetica, sans-serif">Audio</font>
  77.     </td></tr>
  78.     <tr><td>
  79.     &nbsp;<input type="text" name="video" />
  80.     
  81.   <script type="text/JavaScript">
  82.   <!--
  83.   document.busqueda.video.focus();
  84.   //-->
  85.   </script>
  86.  
  87.     <input type="submit" name="buscar" value="Buscar" />
  88.   </td></tr></table>
  89. </form>
  90. </fieldset>
  91.  
  92. <%
  93. if (request.form("buscar")="Buscar") then 
  94.    vid=trim(request.form("video"))
  95.    tipo=request.form("tipo")
  96.    a=0
  97.    ban=0
  98.    Dim palabras(99999)
  99.    i=-1
  100.    
  101.    while (a<len(vid)) 'buscamos las palabras en la BD
  102.       i=i+1
  103.       ban1=0
  104.       video=""
  105.       while ((ban1=0) and (a<len(vid)))'sakamos palabra por palabra
  106.         a=a+1
  107.         if (mid(vid,a,1)<>" ") then 'si es una letra (sin espacios) entonces
  108.           video=video & mid(vid,a,1)
  109.           ban1=0
  110.         else
  111.           if video="" then
  112.             ban1=0
  113.           else
  114.             ban1=1
  115.           end if
  116.         end if
  117.       wend 
  118.       video=replace(video,"'","\t8t\")
  119.       video=replace(video,"%","\p8p\")
  120.       palabras(i)=video 
  121.    wend
  122.    
  123.    'hacemos consulta a la BD
  124.    if tipo="" then
  125.      strSQL = "SELECT * FROM videos WHERE video LIKE '%" & palabras(0) & "%'"
  126.    else
  127.      if tipo="FLV" then
  128.        strSQL = "SELECT * FROM videos WHERE tipo='FLV' AND video LIKE '%" & palabras(0) & "%'"
  129.      else
  130.        if tipo="MP3" then
  131.          strSQL = "SELECT * FROM videos WHERE tipo='MP3' AND video LIKE '%" & palabras(0) & "%'"
  132.        end if
  133.      end if
  134.    end if   
  135.    
  136.    for j=1 to i
  137.      strSQL = strSQL & " AND video LIKE '%" & palabras(j) & "%'"
  138.    next
  139.    strSQL = strSQL & " ORDER BY video"     
  140.    Set objRS = conn.Execute(strSQL)
  141.    Set contador = conn.Execute(strSQL)  'cuento el total de resultados
  142.    
  143.    'Ciclo para contar recultados
  144.    if (not contador.Eof) then
  145.      while not contador.Eof
  146.        cr=cr+1
  147.        contador.movenext
  148.      wend
  149.    else
  150.      cr=0
  151.    end if
  152.    
  153.    if (not objRS.Eof) then 'si hay algun resultado
  154.   %> 
  155.      <br><br>
  156.      <table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
  157.       <%
  158.        if tipo="" then
  159.          response.write("Se encontraron " & cr & " resultados para <b>'" & vid & "'")
  160.        else
  161.          if tipo="FLV" then
  162.            response.write("Se encontraron " & cr & " resultados de video para <b>'" & vid & "'")
  163.          else
  164.            if tipo="MP3" then
  165.              response.write("Se encontraron " & cr & " resultados de audio para <b>'" & vid & "'")
  166.            end if
  167.          end if
  168.        end if
  169.       %>
  170.       </b></font></td></tr></table>
  171.      <hr color="#990000" width="100%" align="right" size="2"/>
  172.   <%
  173.    while not objRS.Eof  'Mientras no llegue al final de la tabla   
  174. %>
  175. <table width="581" border="0">
  176.   <tr>
  177.     <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>
  178.     <td width="470">
  179.       <table width="475" border="0">
  180.          <tr>
  181.            <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>
  182.          </tr>
  183.          <tr>
  184.            <td width=100% height="95" align="left" valign="middle"><font color="#990033" size="2" face="Arial, Helvetica, sans-serif">
  185.            <% response.write(objRS("descripcion")) %></font></td>
  186.          </tr>
  187.       </table>
  188.     </td>
  189.   </tr>
  190.   <tr height="4">
  191.     <td height="11">    </td>
  192.   </tr>
  193. </table>
  194.  
  195.  
  196.   <%
  197.     objRS.movenext
  198.   wend 'cierro ciclo de impresion de resultados
  199.   else 'sino encontro resultados 
  200. %>
  201.   <br>
  202.   <br>
  203.   <table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
  204.   <%   
  205.      if tipo="" then
  206.        response.write("Se encontraron " & cr & " resultados para <b>'" & vid & "'")
  207.      else
  208.        if tipo="FLV" then
  209.          response.write("Se encontraron " & cr & " resultados de video para <b>'" & vid & "'")
  210.        else
  211.          if tipo="MP3" then
  212.            response.write("Se encontraron " & cr & " resultados de audio para <b>'" & vid & "'")
  213.          end if
  214.        end if
  215.      end if 
  216.   %>
  217.   </b></font></td></tr></table>
  218. <hr color="#990000" width="100%" align="right" size="2"/>
  219. <p>
  220.   <%
  221.   end if
  222.   conn.Close
  223.   set objRS = nothing
  224.   set conn = nothing
  225. end if
  226. %>
  227. </p>
  228. <table border="0" width="100%"><tr height="15" align="right"><td align="rigth" valign="middle">
  229. <img src="pie.jpg" height="191"  />
  230. </td>
  231. </tr></table>
  232.  
  233. </td></tr></table>
  234. </td></tr></table>
  235. </body>
  236. </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

PLAIN TEXT
JavaScript:
  1. function vacio(v) {
  2.   for (i=0; i<v.length; i++)
  3.     {
  4.      if (v.charAt(i)!=" ")
  5.        { return true }
  6.     }
  7.   alert("Introduce una busqueda correcta");
  8.   document.busqueda.video.value="";
  9.   document.busqueda.video.focus();
  10.   return false
  11. }

Contiuando con nuestro codigo de index.asp veremos que estamos incluyendo un archivo [conexion.asp] el cual contiene lo siguiente:

PLAIN TEXT
ASP:
  1. set conn = Server.Createobject("adodb.connection")
  2.   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

PLAIN TEXT
JavaScript:
  1. document.busqueda.video.focus();

Enseguida tenemos un codigo ASP

PLAIN TEXT
ASP:
  1. if (request.form("buscar")="Buscar") then 
  2.    vid=trim(request.form("video"))
  3.    tipo=request.form("tipo")
  4.    a=0
  5.    ban=0
  6.    Dim palabras(99999)
  7.    i=-1
  8.    
  9.    while (a<len(vid)) 'buscamos las palabras en la BD
  10.       i=i+1
  11.       ban1=0
  12.       video=""
  13.       while ((ban1=0) and (a<len(vid)))'sakamos palabra por palabra
  14.         a=a+1
  15.         if (mid(vid,a,1)<>" ") then 'si es una letra (sin espacios) entonces
  16.           video=video & mid(vid,a,1)
  17.           ban1=0
  18.         else
  19.           if video="" then
  20.             ban1=0
  21.           else
  22.             ban1=1
  23.           end if
  24.         end if
  25.       wend 
  26.       video=replace(video,"'","\t8t\")
  27.       video=replace(video,"%","\p8p\")
  28.       palabras(i)=video 
  29.    wend
  30.    
  31.    'hacemos consulta a la BD
  32.    if tipo="" then
  33.      strSQL = "SELECT * FROM videos WHERE video LIKE '%" & palabras(0) & "%'"
  34.    else
  35.      if tipo="FLV" then
  36.        strSQL = "SELECT * FROM videos WHERE tipo='FLV' AND video LIKE '%" & palabras(0) & "%'"
  37.      else
  38.        if tipo="MP3" then
  39.          strSQL = "SELECT * FROM videos WHERE tipo='MP3' AND video LIKE '%" & palabras(0) & "%'"
  40.        end if
  41.      end if
  42.    end if   
  43.    
  44.    for j=1 to i
  45.      strSQL = strSQL & " AND video LIKE '%" & palabras(j) & "%'"
  46.    next
  47.    strSQL = strSQL & " ORDER BY video"     
  48.    Set objRS = conn.Execute(strSQL)
  49.    Set contador = conn.Execute(strSQL)  'cuento el total de resultados
  50.    
  51.    'Ciclo para contar recultados
  52.    if (not contador.Eof) then
  53.      while not contador.Eof
  54.        cr=cr+1
  55.        contador.movenext
  56.      wend
  57.    else
  58.      cr=0
  59.    end if
  60.    
  61.    if (not objRS.Eof) then 'si hay algun resultado
  62.       '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

PLAIN TEXT
HTML:
  1. <table width="581" border="0">
  2.   <tr>
  3.     <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>
  4.     <td width="470">
  5.       <table width="475" border="0">
  6.          <tr>
  7.            <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>
  8.          </tr>
  9.          <tr>
  10.            <td width=100% height="95" align="left" valign="middle"><font color="#990033" size="2" face="Arial, Helvetica, sans-serif">
  11.            <% response.write(objRS("descripcion")) %></font></td>
  12.          </tr>
  13.       </table>
  14.     </td>
  15.   </tr>
  16.   <tr height="4">
  17.     <td height="11">    </td>
  18.   </tr>
  19. </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))

PLAIN TEXT
ASP:
  1. objRS.movenext
  2.   wend 'cierro ciclo de impresion de resultados
  3.   else 'sino encontro resultados

Si no encontro resultados entonces imprimimos mensaje de "0 resultados que coincidan con su busqueda"

PLAIN TEXT
HTML:
  1. <table border="0" width="100%"><tr height="15" align="right"><td align="right" valign="middle"><font size="2" face="Arial, Helvetica, sans-serif">
  2.   <%   
  3.      if tipo="" then
  4.        response.write("Se encontraron " & cr & " resultados para <b>'"