Fork me on GitHub

Video

Creates an interactive HTML5 video player with fallback Flash video player.


Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Video module.

YUI().use(
  'aui-video',
  function(Y) {
    // code goes here
  }
);

Using Video

Create an HTML element:

<div id="myVideo"></div>

Now create a new instance of the Video component by setting contentBox to our HTML element's selector. Then, we'll pass the url parameter our video file's url. Finally, let's render it!

YUI().use(
  'aui-video',
  function(Y) {
    new Y.Video(
      {
        contentBox: '#myVideo',
        url: 'http://alloyui.com/video/movie.mp4'
      }
    ).render();
  }
);
Note: you could also use boundingBox, instead of contentBox, to initialize.
Read more about the differences between them.

Configuring Video

There are some other optional parameters that you can pass to your Video instance.

For example, you can specify the Video's width and height by passing integer values. These values will become inline width and height pixel values.

YUI().use(
  'aui-video',
  function(Y) {
    new Y.Video(
      {
        contentBox: '#myVideo',
        height: 360,
        url: 'http://alloyui.com/video/movie.mp4',
        width: 640
      }
    ).render();
  }
);

If you want to load a poster image in the Video player before the user begins playing the video, pass the image url using the poster parameter.

YUI().use(
  'aui-video',
  function(Y) {
    new Y.Video(
      {
        contentBox: '#myVideo',
        height: 360,
        poster: 'assets/myPosterImg.jpg',
        url: 'http://alloyui.com/video/movie.mp4',
        width: 640
      }
    ).render();
  }
);

Video component supports Ogg Theora and Ogg Vorbis formatted media files as well. If you want to use one of the supported Ogg formats, pass the Ogg file url using the oggUrl parameter.

YUI().use(
  'aui-video',
  function(Y) {
    new Y.Video(
      {
        contentBox: '#myVideo',
        ogvUrl: 'http://alloyui.com/video/movie.ogg'
      }
    ).render();
  }
);
Note: Ogg files will only play in browsers that support the Ogg codec format.

You can even play non-supported formats in other browsers with the fallback Flash video player. For example, you can play .mp4 files in Firefox by using the swfUrl parameter to play the Flash video.

YUI().use(
  'aui-video',
  function(Y) {
    new Y.Video(
      {
        contentBox: '#myVideo',
        swfUrl: 'http://videos.liferay.com/common/player.swf',
        url: 'http://videos.liferay.com/webinars/2010-08-11.mp4'
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.