HTML5 Video Package for CMS Using VideoJS

Screencast Demo




Video File

Notes: For info on HTML5 video see : http://diveintohtml5.info/video.html which has a tutorial for video conversion for web using the (free) Miro Video Converter. As HTML5 video implementations vary per web browser, to use this block you will need to prepare (4) files: .mp4, .ogv, .webm and have a preview or "poster" image. Also, if needed, Flowplayer (free) plays your .mp4 as flash media content.

CMS Block supports videos playback using the following supporting files

1. Preview Image: Choose a 'Poster' image, file with a .png or .jpg extension; e.g. still frame from video.
2. MPEG 4 (.mp4): Choose a file with a .mp4 extension as common HTML5 video format; also used for flash fallback
3. Ogg video (.ogv): Choose a file with a .ogv extension; "Theora" file, HTML5 video format e.g. for FireFox
4. WebM video (.webm): Choose a file with a .webm extension; HTML5 video format e.g. for MSIE 9+
5. Maximum Dimensions: Input the maximum width and height in pixels

Links and References:

• Source code : https://github.com/pixelhandler/videojs_player
• CMS: http://www.concrete5.org/ | add-on: http://www.concrete5.org/marketplace/addons/video-js-player/
• HTML5 video: http://diveintohtml5.info/video.html
• Video Converter: http://www.mirovideoconverter.com/
• VideoJS: JavaScript for HTML5 video player - http://videojs.com/
• Flowplayer free: Flash fallback for playing videos for browsers that do not support <video> element - http://flowplayer.org/index.html
• Alternate location to view tutorial : http://www.vimeo.com/28320066