Mobile Video Page Implementation Considerations

Description

Streaming videos in mobile browsers is somewhat limited in comparison to desktop browsers, and how to choose the right implementation parameters in the CMS to guarantee universally supported video display has become a frequently posed question to our team.

An Ingeniux webinar hosted on June 5th, 2013 (available in the archive of the Ingeniux Support site), discusses important considerations when charting videos for mobile devices. Among topics of schema design, use of special effects, use of taxonomy, transcripts, and others, the webinar especially touches on video hosting options, i.e. internal hosting in the CMS versus external hosting in sites like YouTube and Vimeo.

This article focuses on internal hosting in the CMS, recommended file type, and implementation code.

Although the most recent revision of the HTML standard, HTML 5, opens the door to options of how to integrate other popular video formats, the file type guaranteed to play in pre-HTML 5 implementations is .MP4 in combination with the latest edition of JWPlayer, version 6. Videos that have been produced in formats other than .MP4 should and can be easily converted using open source or licensed software like HandBrake, Miro Video Converter, or Adobe Media Encoder (see more below). Integration of the JWPlayer package as well as needed scripts in MVC or XSLT are explained in the Step-by-Step instructions.

Step-by-Step

1. Copy folder JWPlayer ( .zip file "jwplayer" or http://www.longtailvideo.com/jw-player/download/) into the prebuilt directory of the site,
2. Store videos of type MP4 in the media directory of the site; convert file types other than MP4 to the MP4 container using tools like HandBrake (http://handbrake.fr/), Miro Video Converter (http://www.mirovideoconverter.com/ ), Adobe Media Encoder (http://www.adobe.com/products/mediaencoder.html), or similar,
3. Verify that the server supports the mime types required to play video formats; verify that the Media directory is mapped as a virtual directory,
4. Build a video page schema with these suggested elements: sample schema,
5. Reference the jwplayer library (and the license key if applicable) in the implementation code: sample head tag information,
6. Identify the video page's HTML code where the video shall stream and embed this script block: MVC sample  |  XSLT sample