Incorporar Video

Vários métodos de incorporação de video em páginas web e blogues.

Existem vários métodos e possibilidades de implementar vídeos em páginas web. Infelizmente nem todos os métodos funcionam em todos os browsers e versões destes, por isso, por vezes temos que escolher a melhor possibilidade para o nosso caso.

Incorporação Video HTML5 (simples)

Para copiar o código clicar no ícone abaixo

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Exemplo

Incorporação Video HTML5 (todos)

Para copiar o código clicar no ícone abaixo

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
 <!-- MP4 must be first for iPad! -->
 <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
 <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
 <!-- fallback to Flash: -->
 <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
  <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
  <param name="movie" value="__FLASH__.SWF" />
  <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
  <!-- fallback image. note the title field below, put the title of the video there -->
  <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
       title="No video playback capabilities, please download the video below" />
 </object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
 Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
 Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

Exemplo

Explicação completa deste método: Aqui

Incorporação Video YouTube

Para copiar o código clicar no ícone abaixo

<object type="application/x-shockwave-flash" 
  data="https://youtube.googleapis.com/v/v1uyQZNg2vE?fs=1&hl=en_US&rel=0" 
  width="400" height="326" id="VideoPlayback">
  <param name="movie" 
    value="https://youtube.googleapis.com/v/v1uyQZNg2vE?fs=1&hl=en_US&rel=0" />
  <param name="allowScriptAcess" value="sameDomain" />
  <param name="quality" value="best" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="scale" value="noScale" />
  <param name="salign" value="TL" />
  <param name="FlashVars" value="playerMode=embedded" />
</object>

Exemplo

Incorporação Video Windows Media

Método válido sem necessidade da tag <embed>

Para copiar o código clicar no ícone abaixo

<object type="video/x-ms-wmv" 
  data="movie.wmv" 
  width="320" height="260">
  <param name="src" 
    value="movie.wmv" />
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>

Exemplo

Incorporação Video Quicktime

O Quicktime ainda requer um método de duplo object para funcionar em todos os Browsers.

Para copiar o código clicar no ícone abaixo

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
       width="400" height="180">
 <param name="src" value="movie.mov" />
 <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
 <param name="controller" value="true" />
 <param name="autoplay" value="true" />
 <!--[if !IE]> <-->
   <object data="movie.mov" width="400" height="180" type="video/quicktime">
     <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
     <param name="controller" value="true" />
   </object>
 <!--> <![endif]-->
</object>

Exemplo

Explicação completa deste método: Aqui

Incorporação Video Flash:

Opção 1: Método válido sem necessidade da tag <embed>

Para copiar o código clicar no ícone abaixo

<object type="application/x-shockwave-flash" data="ficheiro.swf" width="0" height="0">
<param name="movie" value="ficheiro.swf" />
<param name="quality" value="high"/>
</object>

Exemplo


Opção 2: Método com a tag <embed>

Para copiar o código clicar no ícone abaixo

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0">
<param name="movie" value="ficheiro.swf">
<param name="quality" value="high"/>
<embed src="ficheiro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="0" height="0">
</embed>
</object>

Exemplo