Desenvolvendo uma app HTML5 com elementos web Video usando o Intel XDK

O código fonte deste exemplo pode ser encontrado aqui: https://github.com/gomobile/sample-web-video-playback ou faça o download do Intel(R) XDK para ver todos os exemplos de HTML5.

App Designer Video elements

O Intel® XDK permite aos desenvolvedores de software desenvolver, testar, pré visualizar e distribuir aplicações HTML5 web e apps híbridas. Para iniciar, você precisa fazer o download e instalar o Intel XDK na sua máquina de desenvolvimento com Linux*, Microsoft Windows* ou Apple Mac OS X*.

A aplicação do Intel XDK é composta por um conjunto de ferramentas de desenvolvimento que te ajudam a desenvolver, depurar, testar e fazer o build de apps web para dispositivos móveis e aplicações móveis híbridas com HTML5 para diversas plataformas. Este documento mostra os passos necessários para se embutir vídeos em sua aplicação HTML5, de fontes como Youtube e Vimeo, utilizando a tag video do html5.

Com o XDK, as apps podem ser desenvolvidas usando o editor Brackets* ou através de ferramentas de UI com drag & drop integradas (App Designer e App Starter). Você pode encontrar mais informações sobre o App Designer em http://software.intel.com/pt-br/html5/articles/app-designer-index/ e sobre o App Starter em http://software.intel.com/en-us/html5/videos/make-a-quick-and-attractive-ui-for-your-app. O design de uma app com widgets com web video pode ser feito com alguns poucos clicks utilizando o App Designer. Para começar a usar o App Designer, clique em PROJECTS > Start with a New Project > Work with App Designer.

Embarcando um vídeo do YouTube

  1. No painel “Controls” , arraste o elemento de mídia “YouTube” para a posição desejada no layout.
  2. Digite a URL do video no campo “src”, no painel “Properties”
    1. Esta URL é o endereço web para a página do vídeo, como https://www.youtube.com/watch?v=PPcnL8d5wcM
<div class="embed-video widget uib_w_2 d-margins" data-uib="media/youtube">
    <iframe src="http://www.youtube.com/embed/PPcnL8d5wcM?wmode=transparent">
    </iframe>
</div>

See the Pen Developing a HTML5 app with web Video elements using Intel XDK - Sample 1 by Intel IDZ (@intelidz) on CodePen.

Embarcando um vídeo do Vimeo

  1. No painel “Controls”, arraste o elemento de mídia “Vimeo” para a posição desejada no layout.
  2. Digite a URL do video no campo “src”, no painel “Properties”
    1. Esta URL é o endereço web para a página do vídeo, como http://vimeo.com/83968874
<div class="embed-video widget uib_w_3 d-margins" data-uib="media/vimeo">
    <iframe src="http://player.vimeo.com/video/83968874”>
    </iframe>
</div>

See the Pen Developing a HTML5 app with web Video elements using Intel XDK - Sample 2 by Intel IDZ (@intelidz) on CodePen.

Usando a tag video do HTML5

  1. No painel “Controls”, arraste o elemento de mídia “Video” para a posição desejada no layout.
  2. Digite o path do arquivo de vídeo local no painel “Properties” nos campos “Webm src” e/ou “Mp4 src”
<video>
    <source src="videos/big_buck_bunny_480x272.mp4" type="video/mp4">
</video>

See the Pen Developing a HTML5 app with web Video elements using Intel XDK - Sample 3 by Intel IDZ (@intelidz) on CodePen.

Embarcando um vídeo web-based de qualquer lugar

Vídeos web-based armazenados online também podem ser embarcados em sua app, mesmo que estejam fora dos populares serviços do YouTube e Vimeo. O primeiro conselho para embarcar vídeos é inspecionar os fontes html da página que contém o vídeo. Entender a estrutura do código é vital para apresentar o conteúdo apropriadamente. Se o vídeo está em uma div que possui largura e altura de 100%, então o vídeo será redimensionado com base nos limites da página, ou no nosso caso, do iframe. A chave para visualizar nosso vídeo é a utilização da tag <iframe>. Como mostrado acima, no caso de vídeos embarcados do Vimeo, você está na realidade vendo outra página com apenas o vídeo através de um iframe. Veja http://player.vimeo.com/video/83968874.

<iframe src="webpage_URL"></iframe>

See the Pen Developing a HTML5 app with web Video elements using Intel XDK - Sample 4 by Intel IDZ (@intelidz) on CodePen.