quinta-feira, 13 de maio de 2010

Inserção de vídeos em página HTML usando PHP

Recentemente tive um problemão... Precisei desenvolver um gerenciador de conteúdos para um dos sites aqui no trabalho e o mesmo precisava lidar com vídeos... Diversos formatos. Daí começou a minha aventura.
Se você já precisou inserir um vídeo em uma página deve ter percebido que pra cada formato de vídeo você deve usar um código bem particular, diferente... Óbvio se você não quiser usar a tag "embed", que desencorajo totalmente seu uso. Um artigo bem interessante que provavelmente te desencorajará a usar a tag "embed" é este aqui: http://www.maujor.com/tutorial/adeus-embed.php (url 1). Recomendo sua leitura.

Se você quiser entender melhor os formatos de vídeo, quais são recomendados ou não para usar no seu site, visite o site http://websitehelpers.com/video/formats.html (url 2). Me foi de grande ajuda.

Vamos ao que interessa...
Neste artigo me proponho a publicar uma função genérica em PHP , que implementei recentemente, que permite inserir um vídeo, qualquer que seja seu formato, na tua página. Para isto, considerei todos os formatos apresentados na url 2 acima, analisei todos os comentários da url 1 acima, usei o gerador de códigos deste site: http://cit.ucsf.edu/embedmedia/step1.php (url 3) e, para os vídeos em flash no formato flv, usei o player viral, que pode ser obtido em http://www.longtailvideo.com/players/jw-flv-player/ (url 4). Recomendo fortemente você baixar este player-viral e testá-lo antes de prosseguir. Isso o ajudará a fazer ajustes que julgue necessários.

Dependendo do arquivo de entrada, a função retorna o código de inserção de plug-in adequado.
Antes de usar a função, você precisará baixar o player-viral na url 4 acima. Uma vez baixado, crie uma pasta de nome playerviral no local onde os arquivos de vídeos ficarão no seu servidor e copie todos os arquivos do player viral para esta pasta (na verdade os arquivos player-viral.swf, swfobject.js e yt.swf bastam).
Ex: No meu caso, tenho uma pasta no servidor onde ficam todos os meus vídeos: /httpdocs/siteteste/videos. Nesse caso, a pasta playerviral ficará em /httpdocs/siteteste/videos/playerviral.
Obs: Caso você queira trocar a localização e/ou nome desta pasta no teu sistema, altere as linhas indicadas  abaixo convenientemente no código de inserção de plug-in de vídeos FLV:
1) <param name="movie" value="playerviral/player-viral.swf" />
2) <param name="flashvars" value="file=../<?=$filename?>" />
3) src="playerviral/player-viral.swf"
4) flashvars="file=../<?=$filename?>"
Note que nas linhas (2)  e (4), o caminho indicado deve ser a partir da pasta do playerviral para a pasta onde os vídeos flv estiverem armazenados.

Lá vai a função:

function getHTMLVideoCode( $filename, $width=320, $height=320, $allowembed = false)
{
  $extensao = explode(".", $filename);
  $extensao = end($extensao);
  $htmlcode = "";
 
  switch($extensao)
  {
    case "flv": //Funcionando no firefox e no IE. Requer player-viral
      ?>
      <!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
      <!-- A utilização do código abaixo requer que os arquivos do player-viral
           estejam presentes no servidor (pasta playerviral)
      -->
      <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
              name="player" width="<?=$width?>" height="<?=$height?>">
          <param name="movie" value="playerviral/player-viral.swf" />
          <param name="allowfullscreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <param name="flashvars" value="file=../<?=$filename?>" />
          <embed type="application/x-shockwave-flash"
                 id="player2"
                 name="player2"
                 src="playerviral/player-viral.swf"
                 width="<?=$width?>"
                 height="<?=$height?>"
                 allowscriptaccess="always"
                 allowfullscreen="true"
                 flashvars="file=../<?=$filename?>"
          />
      </object>
      <!-- END OF THE PLAYER EMBEDDING -->
      <?php
      break;
    case "wmv": //Funcionando no firefox e no IE.
    case "wma":   
    case "mp3":   
    case "mpg":   
    case "mpeg":
    case "asf":
      ?>
      <!-- begin embedded WindowsMedia file... -->
      <table border='0' cellpadding='0' align="left">
      <tr><td>
      <OBJECT id='mediaPlayer' width="<?=$width?>" height="<?=$height?>"
      classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
      codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
      standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
      <param name='fileName' value="<?=$filename?>">
      <param name='animationatStart' value='true'>
      <param name='transparentatStart' value='true'>
      <param name='autoStart' value="false">
      <param name='showControls' value="true">
      <param name='loop' value="false">
      <EMBED type='application/x-mplayer2'
        pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
        id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
        bgcolor='darkblue' showcontrols="true" showtracker='-1'
        showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="<?=$width?>" height="<?=$height?>"
        src="<?=$filename?>" autostart="false" designtimesp='5311' loop="false">
      </EMBED>
      </OBJECT>
      </td></tr>
      <!-- ...end embedded WindowsMedia file -->
    <!-- begin link to launch external media player... -->
        <tr><td align='center'>
        <a href="<?=$filename?>" style='font-size: 85%;' target='_blank'>Launch in external player</a>
        </td></tr>
      </table>
      <!-- ...end link to launch external media player... -->
      <?php
      break;
    case "rm": //Funcionando no firefox e no IE. Requer que o usuário tenha o realplayer instalado
      ?>
      <!-- begin embedded RealMedia file... -->
      <table border='0' cellpadding='0' align="left">
        <!-- begin video window... -->
        <tr><td>
        <OBJECT id='rvocx' classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
        width="320" height="240">
        <param name='src' value="<?=$filename?>">
        <param name='autostart' value="false">
        <param name='controls' value='imagewindow'>
        <param name='console' value='video'>
        <param name='loop' value="false">
        <EMBED src="<?=$filename?>" width="<?=$width?>" height="<?=$height?>"
        loop="false" type='audio/x-pn-realaudio-plugin' controls='imagewindow' console='video' autostart="false">
        </EMBED>
        </OBJECT>
        </td></tr>
        <!-- ...end video window -->
          <!-- begin control panel... -->
          <tr><td>
          <OBJECT id='rvocx' classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
          width="<?=$width?>" height='30'>
          <param name='src' value="<?=$filename?>">
          <param name='autostart' value="false">
          <param name='controls' value='ControlPanel'>
          <param name='console' value='video'>
          <EMBED src="<?=$filename?>" width="<?=$width?>"  height='30'
          controls='ControlPanel' type='audio/x-pn-realaudio-plugin' console='video' autostart="false">
          </EMBED>
          </OBJECT>
          </td></tr>
          <!-- ...end control panel -->
          <!-- ...end embedded RealMedia file -->
      </table>
      <!-- ...end link to launch external media player... -->
      <?php
      break;
    case "mov":
    case "mp4":
      ?>
      <!-- begin embedded QuickTime file... -->
      <table border='0' cellpadding='0' align="left">
        <!-- begin video window... -->
        <tr><td>
        <OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="<?=$width?>"
        height="<?=$height?>" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
        <param name='src' value="<?=$filename?>">
        <param name='autoplay' value="false">
        <param name='controller' value="true">
        <param name='loop' value="false">
        <EMBED src="<?=$filename?>" width="<?=$width?>" height="<?=$height?>" autoplay="false"
        controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/'>
        </EMBED>
        </OBJECT>
        </td></tr>
        </table>
        <!-- ...end embedded QuickTime file -->
      <?php
      break;
    default:
      $htmlcode = "<strong>Impossível inserir vídeo $filename: Formato inválido</strong>";
  }
 
  return $htmlcode;
}

Para testar, crie um arquivo php, insira a função acima e o código abaixo:

function cabecalho()
{
  ?>
<html>
<head>
<title>Teste de inserção de vídeos</title>
<meta name="dc.title" content="Embedded Media HTML Generator">
<link rel="StyleSheet" href="/CIT.css" type="text/css">
</head>
<body>
  <?php
}

function rodape()
{
  ?>
  </body>
  </html>
  <?php
}

//$filename = "testes/video.wmv"; //wmv funcionando
//$filename = "video.flv";  //flv funcionando
//$filename = "video.rm"; //rm funcionando
//$filename = "audio.mp3"; //mp3 funcionando
//$filename = "audio.wma"; //wma funcionando
//$filename = "video.mpg"; //wma funcionando
//$filename = "video.mpeg"; //wma funcionando
//$filename = "video.avi"; //wma funcionando
//$filename = "video.mov"; //mov funcionando

$filename = "video.mp4";

echo cabecalho();
echo getHTMLVideoCode( $filename );
echo rodape();


Esta função foi testada para todos os formatos acima listados nos browsers IE8 e Firefox 3.5.8 e funcionou perfeitamente.
Note que aproveitei o embalo e inserí alguns formatos de áudio (wma e mp3). Acredito que se inserir o formato wav funcionará também sem problema algum.

ATENÇÃO: Este arquivo php deve estar na mesma pasta onde se encontram os vídeos! Se você for colocá-lo em outro lugar terá que reajustar os paths que aparecerem nos códigos de cada tipo de mídia convenientemente!

Thats all folks!
Espero que seja útil a alguém :-)

Palavras-chave para facilitar busca no google: PHP inserir vídeos html flv mov mpg avi rm

Nenhum comentário:

Postar um comentário