Video

• Introduction
• Basic Example
• Real World Example

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="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://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: 'https://alloyui.com/video/movie.mp4'
      }
    ).render();
  }
);

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: 'https://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: 'https://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: 'https://alloyui.com/video/movie.ogg'
      }
    ).render();
  }
);

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: 'https://videos.liferay.com/common/player.swf',
        url: 'https://videos.liferay.com/webinars/2010-08-11.mp4'
      }
    ).render();
  }
);