Why use html5media?

"HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image. They were also designed to give users a faster experience by doing away with browser plugins such as Adobe Flash.

Unfortunately, older browsers don't support HTML5 video and audio tags, and even modern browsers don't support a consistent set of video codecs, making embedding a video rather difficult.

The html5media project makes embedding video or audio as easy as it was meant to be. It's a fire-and-forget solution, and doesn't require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It's one of the smallest, fastest solutions available, and as browser technology improves it will become even faster." – http://html5media.info/

How to add the plugin

Just search for Hambern.Html5media and add it to your project

Make sure you're prepared

As Html5media will add a javascript-library to your site you first of all have to make sure you have added {% scripts %} somewhere in your layout

Add the component

Now you're ready to pull the component to your page or partial. Display the player with {% component 'Media' %}

Make it behave

Now you can make it behave the way you want to. If you open the component inspector you can set the following properties:

• Alias, the name of the component
• Media type, video or audio (default: video)
• Preload, true or false? (default: false)
• Controls, true or false? (default: true)
• Autoplay, true or false? (default: false)
• Loop, true or false? (default: false)
• Hidden, true or false? (default: false)
• Source, the url-path to the media
• Poster, the url-path to the poster image
• Class, set the class attribute
• Style, set the style attribute
• Width, set the width attribute
• Height, set the height attribute

Customize it when you add it

If you now view your page you will find a boring placeholder poster image and if you press play you will hear a great but a bit boring hip-hop beat I've made. Let's replace these with your content by overriding the defaults. I do it like this when I use the RainLab.Blog plugin with my Hambern.Featuredfiles extension:

{% component 'Media' 
      source = post.featured_files.first.path
      poster = post.featured_images.first.thumb(400,400,'crop')
%}

Now you'll see (or hear) the first featured file and see the first featured image as a square poster image.