Skip to content

Instantly share code, notes, and snippets.

@kara-ryli
Created July 20, 2012 00:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kara-ryli/3147953 to your computer and use it in GitHub Desktop.
Save kara-ryli/3147953 to your computer and use it in GitHub Desktop.
Adds HTML5 MediaElement and full screen support to Y.Node
/*global YUI*/
/**
* Adds HTML5 Media Element support to Y.Node
*
* @module node
* @submodule node-media
* @main node
* @requires node-base
*/
YUI.add("node-media", function (Y) {
var doc = Y.config.doc,
html5MediaEvents = {
canplay: 1,
canplaythrough: 1,
durationchange: 1,
emptied: 1,
ended: 1,
error: 1,
loadeddata: 1,
loadedmetadata: 1,
loadstart: 1,
pause: 1,
playing: 1,
progress: 1,
ratechange: 1,
readystatechange: 1,
seeked: 1,
seeking: 1,
stalled: 1,
suspend: 1,
timeupdate: 1,
volumechange: 1,
waiting: 1
},
yLangIsFunction = Y.Lang.isFunction;
// Allow YUI to add event listeners for HTML media events
if (Y.Node.DOM_EVENTS) {
Y.mix(Y.Node.DOM_EVENTS, html5MediaEvents);
}
/**
@class Node
**/
/**
Plays an audio or video element
@method play
@chainable
**/
/**
Pauses an audio or video element
@method pause
@chainable
**/
/**
Tests a MediaElement to see if it can play the specified MIME type.
@example
elem.canPlayType('video/mp4; codecs="avc1.42E01E"');
@method canPlayType
@param {String} mime MIME type (and optional codec) to test.
@return {Boolean} Whether the video can play the requested type. Possible responses: "probably", "maybe" and "".
**/
if (!Y.Node.prototype.play) {
Y.Array.each(["play", "pause", "canPlayType"], function (method) {
Y.Node.addMethod(method, function () {
var args = Y.Array(arguments),
node = args.shift(),
retVal;
if (yLangIsFunction(node[method])) {
retVal = node[method].apply(node, args);
}
return retVal;
});
});
}
/**
If the current node is full sceen.
@method isFullScreen
@return {Boolean} Whether or not the element is full screen
**/
/**
Attempts to enter full screen mode.
@method requestFullScreen
@chainable
**/
/**
Attempts to exit full screen mode.
@method cancelFullScreen
@chainable
**/
// add full screen API Methods
Y.Array.some([
// spec
{
test: function () {
return yLangIsFunction(doc.cancelFullScreen);
},
isFullScreen: function () {
return doc.fullScreenElement === this;
},
requestFullScreen: "requestFullScreen",
cancelFullScreen: function () {
doc.cancelFullScreen();
}
},
// webkit
{
test: function () {
return Y.UA.webkit >= 533;
},
isFullScreen: function () { return this.webkitDisplayingFullscreen; },
requestFullScreen: "webkitEnterFullscreen",
cancelFullScreen: "webkitExitFullscreen"
},
// moz
{
test: function () {
return Y.UA.gecko >= 9;
},
isFullScreen: function () {
return doc.mozFullScreen;
},
requestFullScreen: "mozRequestFullScreen",
cancelFullScreen: function () {
doc.mozCancelFullScreen();
return this;
}
},
// unsupported
{
test: function () {
return false;
},
isFullScreen: function () { return false; },
requestFullScreen: function () {
Y.log("Full Screen is not supported.");
return this;
},
cancelFullScreen: function () { return this; }
}
], function (obj) {
var test = obj.test();
if (test) {
Y.Array.each(["isFullScreen", "requestFullScreen", "cancelFullScreen"], function (method) {
var fnName = obj[method],
fn = yLangIsFunction(fnName) ?
function (node) { return fnName.call(node); } :
function (node) { return node[fnName](); };
Y.Node.addMethod(method, fn);
});
}
return test;
});
}, "3.5.0", {
requires: ["node-base"]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment