Developing a HTML5 app with web Video elements using Intel XDK

The source code for this sample can be found here: https://github.com/gomobile/sample-web-video-playback or download the Intel(R) XDK to check out all the HTML5 Samples.

App Designer Video elements

The Intel® XDK enables software developers to develop, test, preview and deploy HTML5 web and hybrid apps. To get started, you must first download and install the Intel XDK on your Linux*, Microsoft Windows* or Apple Mac OS X* development system.

The Intel XDK application consists of a set of development tools to help you code, debug, test and build mobile web apps and hybrid HTML5 apps for multiple target platforms. This document covers the steps for embedding videos into your HTML5 application from Youtube, Vimeo and using the html5 video tag.

With the XDK, apps can be developed using the Brackets* editor or drag & drop UI tools (App Designer or App Starter) integrated. You can find more information about App Designer at http://software.intel.com/en-us/html5/articles/app-designer-index/ as well as for App Starter at http://software.intel.com/en-us/html5/videos/make-a-quick-and-attractive-ui-for-your-app. Designing an app with web video widgets can be done with a few clicks using App Designer. In order to get started with App Designer, click PROJECTS > Start with a New Project > Work with App Designer.

Embedding a YouTube video

  1. In the “Controls” panel, drag the “YouTube” media element to the desired position on the layout.
  2. Type the URL of the video into the “src” field in the “Properties” panel
    1. This URL is the web address for the page such as https://www.youtube.com/watch?v=PPcnL8d5wcM

Embedding a Vimeo video

  1. In the “Controls” panel, drag the “Vimeo” media element to the desired position on the layout.
  2. Type the URL of the video into the “src” field in the “Properties” panel
    1. This URL is the web address for the page such as http://vimeo.com/83968874

Using the HTML5 video tag

  1. In the “Controls” panel, drag the “Video” media element to the desired position on the layout.
  2. Type the local video file’s path into the “Webm src” and/or “Mp4 src” field in the “Properties” panel

Supported video codecs across platforms

 

iOS*, Android*, & Windows Phone*
MIME type Description Extensions
video/3gpp 3GPP media 3gp
video/mp4 MPEG-4 media mp4

For more information on video codecs supported by each platform:

Embedding a web-based video from ANYWHERE

Web-based videos stored online can also be embedded into your app outside of the popular YouTube and Vimeo videos. The first piece of advice for embedding videos is to inspect the html source of the page with the video. Understanding the structure of the code is vital for displaying the content properly. If the video is contained in a div that has a width and height of 100%, then the video will resize based on the constraints of the page or in our case the iframe. The key to viewing your video is by utilizing the <iframe> tag. As seeing above in the case of embedding Vimeo videos, you are actually viewing another page with only the video contained through the iframe. See here at http://player.vimeo.com/video/83968874.