Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

HTML5 Player (gallery-player) on cdn

Last Updated: 03/19/10

+ 2 -

Josh Brickner

YUI Contributor

Created: 03/19/10
Last CDN Push: 03/23/10
Build Tag: gallery-2010.03.23-17-54
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.

Features

- Get a player in 3 easy steps
- Full Javascript/HTML/CSS UI
- Full Availability of HTML5 <video> attributes
- Pass content to be displayed in browsers that do not support <video>
- Support for multiple formats for each video.
- Support for WebKit's fullscreen API
- Full Range of Video Controls
- Specify which controls you need
- Follows YUI practices (or at least tries too!)

Features Coming Soon

- Support for <audio>
- Better cross-browser compatibility
- Pseudo-Fullscreen capabilites (will size video to browser window)

Code Sample

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

var player;
YUI({
    modules: {
        'gallery-player': {
            fullpath:'js/gallery-player-min.js',
            requires: ['widget','node','slider', 'anim', 'array']
        }
    }
}).use('gallery-player', 'node-base', function(Y){
    player = new Y.Player({
        contentBox: '#video',
        type: 'video',
        stylesheet: 'false',
        images: 'images/',
        sources:[
            {title:'http://macinjosh.s3.amazonaws.com/video.mov', type:'video/mp4'},
            {title:'http://macinjosh.s3.amazonaws.com/video.mp4', type:'video/mp4'},
            {title:'http://macinjosh.s3.amazonaws.com/video.ogv', type:'video/ogg'}
        ],
        poster: 'video/poster.png',
        preload: false,
        autoplay: true,
        loop: false,
        standardControls: false,
        controlSet: ['play','rewind', 'forward', 'fullscreen', 'volume', 'scrubber'],
        width: 800,
        height: 450,
        degrade: '<p>Please use Firefox, Safari, or Chrome</p>'
    });
    player.render();
    player.focus();
});

var player;
YUI({
    modules: {
        'gallery-player': {
            fullpath:'js/gallery-player-min.js',
            requires: ['widget','node','slider', 'anim', 'array']
        }
    }
}).use('gallery-player', 'node-base', function(Y){
    player = new Y.Player({
        contentBox: '#video',
        type: 'video',
        stylesheet: 'false',
        images: 'images/',
        sources:[
            {title:'http://macinjosh.s3.amazonaws.com/video.mov', type:'video/mp4'},
            {title:'http://macinjosh.s3.amazonaws.com/video.mp4', type:'video/mp4'},
            {title:'http://macinjosh.s3.amazonaws.com/video.ogv', type:'video/ogg'}
        ],
        poster: 'video/poster.png',
        preload: false,
        autoplay: true,
        loop: false,
        standardControls: false,
        controlSet: ['play','rewind', 'forward', 'fullscreen', 'volume', 'scrubber'],
        width: 800,
        height: 450,
        degrade: '<p>Please use Firefox, Safari, or Chrome</p>'
    });
    player.render();
    player.focus();
});

Forum Posts

No forum posts for this module.