- Como Criar Um Site, Blog – WebMaster.pt - https://www.webmaster.pt -

Como Usar O Leitor Personalizado Do Youtube No Seu Site

Tweet [3]

Se você navega na internet, certamente já ouviu falar do YouTube.

Esta empresa lançou há algum tempo mais uma novidade para ganhar ainda mais visitante e agregar mais serviços aos seus usuários: Um Leitor Personalizado dos Vídeos [4]

Através dele é possível colocar em seus sites uma galeria com todos os vídeos que você tem cadastrado em seu usuário ou também os seus vídeos marcados como favoritos.

Além disso você pode personalizar o player com várias cores diferentes.

E aí, o que achou? Prefere fazer algo personalizado e fácil de gerenciar?

Acompanhe nossa matéria a seguir, pois com certeza você saberá como implementar essa ferramenta a seu site.

Configurando A Base De Dados MySQL

Antes de tudo, é necessário configurar a base de dados.

Com o BD já criado, acesse o ficheiro “config.php” e configure o ficheiro alterando as informações de acesso à base de dados (conforme script a seguir).



<?php

<?

$host      = "SERVIDOR";           // SERVIDOR
$database  = "DATABASE";          // BASE DE DADOS
$login_db  = "USUARIO";          // USUARIO MYSQL
$senha_db  = "SENHA";           // SENHA MYSQL

$conn      = mysql_connect($host, $login_db, $senha_db);

mysql_select_db($database, $conn);

?>

Após a configuração, vamos agora criar a tabela que será usada!

Configurando A Tabela na Base de Dados MySQL

Para configurar a base de dados através do script, abra o ficheiro script-sql.txt (disponível em anexo) e cole seu conteúdo no Programa utilizado para gerenciamento da base de dados.

Em nossas matérias utilizamos como padrão o MySQLFront. Caso tu também esteja utilizando este programa, clique em SQL Editor e cole o conteúdo do script (conforme disponibilizado a seguir).



----- INSTALANDO A TABELA -----

CREATE TABLE `tbl_videos` (
  `id_video` int(11) NOT NULL auto_increment,
  `nome` varchar(200) NOT NULL default '',
  `video` varchar(200) NOT NULL default '',
  `data_cadastro` varchar(20) default NULL,
  `status` char(1) default NULL,
  PRIMARY KEY  (`id_video`)
);

INSERT INTO `tbl_videos` (`id_video`,`nome`,`video`,`data_cadastro`,`status`) VALUES (2,'Casamento','http://www.youtube.com/watch?v=mkKo8bNL8pU','2010-11-29','1');
INSERT INTO `tbl_videos` (`id_video`,`nome`,`video`,`data_cadastro`,`status`) VALUES (5,'Dicas para uso de Laboratório de Informática','http://www.youtube.com/watch?v=DwrQJpn0IQw','2010-11-29','1');

Após importar os dados, você já poderá fazer uso do sistema abaixo.

Explorando o Sistema

O uso deste ficheiro é bem prático e objetivo.

Através dele e com um pequeno conhecimento de PHP / MySQL você consegue adaptar o código fonte a seu web site.

Abaixo estaremos verificando como funciona a página index (responsável por apresentar em tela os vídeos – conforme o script e a imagem a seguir):



<?php

include("config.php");

$sql = mysql_query("SELECT * FROM tbl_videos order by id_video DESC", $conn);
$dados = mysql_fetch_assoc($sql);
$rows = mysql_num_rows($sql);
$contador = 0;

?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WebMaster.PT - Trabalhando com galeria de vídeos</title>
<style type="text/css">
<!--
body {
  margin-left: 5px;
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
}
a:link {
  color: #000000;
}
a:visited {
  color: #000000;
}
a:hover {
  color: #000000;
}
a:active {
  color: #000000;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body><center><br><h2>WebMaster.PT</h2<br>Trabalhando com galeria de vídeos<br><Br>

<br><a href='adicionar_videos.php'>adicionar vídeo</a> - <a href='gerenciar_videos.php'>gerenciar vídeos</a><br><br>

<table width="170" align="center">
   <tr>
     <td width="228"><div align="center"><strong>Galeria de Videos </strong></div></td>
   </tr>
   <tr>
     <td></td>
   </tr>
</table>

   <? do { $contador = $contador + 1;
  
$url_video  = $dados["video"];
$nome_video = $dados["nome"];
   ?>
     <table width="140" border="0" align="center" cellspacing="5" bordercolor="#000000">
     <tr><td width="128"><div align="center"> <a href='#' onClick="MM_openBrWindow('ver_video.php?url_video=<? echo $url_video; ?>','vervideo','width=430,height=370')" />
     <?
    
     $url = $url_video;

     $img = '';

   if(preg_match("#http://(.*)\.youtube\.com/watch\?v=(.*)(&(.*))?#", $url, $matches)){
      if(isset($matches[2]) && $matches[2]!=''){
         $img = 'http://img.youtube.com/vi/'.$url_video.'/default.jpg';
      }
   }

echo "<img src='http://img.youtube.com/vi/". $matches[2]."/default.jpg'>";

?></a><br>
     <div align="center"><b><?  echo $nome_video; ?></b></a></div></div></td></tr></table>
   <? } while ($dados = mysql_fetch_assoc($sql)); ?>  

</body>
</html>

IMAGEM 01 (Apresentando em tela os vídeos cadastrados)

Apresentando em tela os vídeos cadastrados

Como você pode verificar acima, o sistema é bem prático de mexer.

Nele não inseri contador de páginas, apresentação personalizada do código, até porque não era o foco, mas seu uso é bem prático.

Inserindo Novo Vídeo:

O processo de inserção funciona como se fosse em um formulário comum: Você preenche as informações e clica no botão para envio.

OBS.: Diferente de outras soluções, neste sistema você precisa inserir a URL. Feito isso, ele lhe dará a possibilidade de visualizar sempre que quiser seu vídeo preferido (conforme script e imagem a seguir).



<html>
<head>
<title>WebMaster.PT - Trabalhando com galeria de vídeos</title>
</head>
<body><center><br><h2>WebMaster.PT</h2<br>Trabalhando com galeria de vídeos<br><Br>

<div align="center">
  <form action="script_youtube.php?acao=cadastrar" method="post" enctype="multipart/form-data" name="form1">
    <table width="500" border="0" cellspacing="5">
      <tr>
        <td width="56"><div align="left"><strong>Nome do Vídeo:</strong></div></td>
        <td width="128"><div align="left">
          <label>
          <input name="nome" type="text" id="empresa">
          </label>
        </div></td>
      </tr>
      <tr>
        <td><strong>Url do Vídeo:</strong></td>
    <td><div align="left">
      <label></label>
      <input name="arquivo" type="text" id="arquivo">
    </div></td>
      </tr>
      <tr>
        <td colspan="2"><div align="center">
          <input type="submit" name="Submit" value="Enviar">
        </div></td>
      </tr>
    </table>
    <p>OBS.: Você pode add Videos do Youtube - Google Videos e Outros</p>
  </form>
</div>
</body>
</html>

IMAGEM 02 (Cadastrando um novo vídeo)

Cadastrando um novo vídeo

OBS.: Após preencher os campos, o sistema lhe enviará para o script de inserção (que funciona em uma página separada – conforme script a seguir):

Página “script_youtube.php”



<?
include("config.php");

$acao = $_GET['acao'];

switch ($acao) {

case cadastrar:

$nome          = $_POST['nome'];
$video         = $_POST['arquivo'];
$data_cadastro = date('Y-m-d');
$status        = "1";

$query_cadastrar = "insert into tbl_videos(nome, video, data_cadastro, status) VALUES('$nome', '$video', '$data_cadastro', '$status')";
$rs_cadastrar    = mysql_query($query_cadastrar);

if ($rs_cadastrar){
?>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> alert ("Cadastro de vídeo efetuado com sucesso")</SCRIPT>
<SCRIPT language="JavaScript">window.location.href="index.php";</SCRIPT>

<? }else{ ?>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> alert ("Erro ao cadastrar vídeo")</SCRIPT>
<SCRIPT language="JavaScript">window.location.href="index.php";</SCRIPT>

<?
}

break;

case excluir:

$id_video               = $_GET['id_video'];

$query_excluir = "DELETE FROM tbl_videos WHERE id_video = '$id_video'";
$rs_excluir    = mysql_query ($query_excluir);

if($rs_excluir){

?>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> alert ("Vídeo excluído com sucesso")</SCRIPT>
<SCRIPT language="JavaScript">window.location.href="index.php";</SCRIPT>

<?
}
else
{
?>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> alert ("Erro ao excluir Vídeo")</SCRIPT>
<SCRIPT language="JavaScript">window.location.href="index.php";</SCRIPT>
<?
}

break;

}

?>

Características Do Leitor Personalizado Do Youtube

Após clicar no vídeo cadastrado (disponível na página inicial), veja que o sistema lhe encaminhará para uma página onde será apresentado o vídeo (conforme script e imagem a seguir):



<!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=iso-8859-1" />
<title>WebMaster.PT - Trabalhando com galeria de vídeos</title>
<style type="text/css">
<!--
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}
-->
</style></head>

<body>

<div id="player">

<?

$url = $_GET['url_video'];
function embedVideo($url,$width,$height){

   if(preg_match("#http://(.*)\.youtube\.com/watch\?v=(.*)(&(.*))?#", $url, $matches)){
      echo '
            <object width="'.$width.'" height="'.$height.'">
               <param name="movie" value="http://www.youtube.com/v/'.$matches[2].'&hl=pt-br&fs=1"></param>
               <param name="allowFullScreen" value="true"></param>
               <param name="allowscriptaccess" value="always"></param>
               <embed src="http://www.youtube.com/v/'.$matches[2].'&hl=pt-br&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'.$width.'" height="'.$height.'"></embed>
            </object>
            ';
   }elseif(preg_match("#http://www\.metacafe\.com/watch/(([^/].*)/([^/].*))/?#", $url, $matches)){
      echo '<embed flashVars="playerVars=showStats=no|autoPlay=no|videoTitle="  src="http://www.metacafe.com/fplayer/'.$matches[1].'.swf" width="'.$width.'" height="'.$height.'" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';
   }
}

$youtubeVideo1 = $_GET['url_video'];

embedVideo($youtubeVideo1,425,344);

?>

</div>
</body>
</html>

IMAGEM 03 (Visualizando o vídeo)

Visualizando o vídeo

Veja que o sistema não te dá apenas o recurso de visualizar o vídeo cadastrado. Através dele você poderá efetuar também busca personalizada através do próprio youtube (conforme imagem a seguir):

IMAGEM 04 (Buscando vídeo no Youtube)

Buscando vídeo no Youtube

OBS.: Como nosso foco é apenas a apresentação da solução, apenas inserimos as opções de inserção, visualização de vídeos cadastrados e exclusão.

Caso seja de seu interesse, este sistema poderá ser melhorado (tanto na aparência, quanto na inserção de novos recursos).

Espero que esta solução lhe ajude no dia a dia.

Como Usar O Leitor Personalizado Do Youtube No Seu Site [5]

Tweet [3]
Be Sociable, Share!
  • [6]
  • [7]
  • [8]
  • [9]
  • [10]