#275

Product support

Get help in the plugin support forum.

Categories

  • Miscellaneous
  • Utility

What is this?

This plugin is based on html5media and makes it easy to add a HTML5 element to your site.

"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 use it

I use 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.

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.

1.0.1

First version of Html5media

Mar 01, 2016