WARNING: concrete5 5.6 and earlier are end-of-life. Sales from the marketplace have now ended. Click here to learn more about this transition.

Video JS Player

Open source software inclucded:

  • VideoJS - JavaScript for HTML5 video player
  • Flowplayer free - Flash fallback for playing videos for browsers that do not support <video> element

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.

Block supports videos playback using the following:

  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

Source Code:

Requirements:

  • Set your 'Allowed File Types' under 'File Manager > Access' tab to include file types: mp4, ogv, webm
    e.g. yourdomain.com/index.php/dashboard/files/access/ 
  • Format and upload files in the above mentioned formats, see references below for instructions.
  • Your server should understand these filetypes as well, if needed add to your .htaccess file the proper MIME type declatations see the HTML5Boilerplate project, link below.

References:

Screencast:

Add to Cart

Sales have ended due to EOL

Approved by PRB

Our 30 Day Support Policy

  • Replies to tickets every few days.

Support Hosted

  • On marketplace.concretecms.com

http://pixelhandler.com/blog/2011/08/29/html5-video-package-for-cms-using-videojs/