Screencast: Demo of HTML5 video used in a CMS block
videojs_player package as add-on for Concrete5.org CMS
The screencast below shows how to use the videojs_player package and also notes the tools used to prepare video for the block.
Screencast Demo
Notes: For info on HTML5 video see : http://diveintohtml5.org/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
- Preview Image: Choose a ‘Poster’ image, file with a .png or .jpg extension; e.g. still frame from video.
- MPEG 4 (.mp4): Choose a file with a .mp4 extension as common HTML5 video format; also used for flash fallback
- Ogg video (.ogv): Choose a file with a .ogv extension; “Theora” file, HTML5 video format e.g. for FireFox
- WebM video (.webm): Choose a file with a .webm extension; HTML5 video format e.g. for MSIE 9+
- 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.org/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