Update Youtube player to HTML5

author: Stuart Knightley 2012-03-19 09:46:38 -0700
committer: Stuart Knightley 2012-03-19 09:46:38 -0700
commit: eb5cda3ce03b35c3335b91c34ead0cdf290b243e (patch)
tree: c0dd72e2d805e04c6650c2e767d2847ee51a6171 /node_modules/montage
parent: 222562c734396403c18c90a1ca395a36c4d49da4 (diff)
download: ninja-eb5cda3ce03b35c3335b91c34ead0cdf290b243e.tar.gz
2 files changed, 24 insertions, 24 deletions
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
index ae757626..ec61493c 100644
--- a/node_modules/montage/ui/youtube-player.reel/youtube-player.html
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
@@ -7,23 +7,19 @@
 <html>
    <head>
    <title></title>
+    <script src="http://www.youtube.com/player_api"></script>
    <script type="text/montage-serialization">
    {
        "owner": {
            "prototype": "montage/ui/youtube-player.reel",
            "properties": {
-                "element": {"#": "container"},
+                "element": {"#": "iframe"}
-                "player": {"#": "player"}
            }
        }
    }
    </script>
 </head>
 <body>
-    <div data-montage-id="container" class="montage-youtube-player">
+    <iframe data-montage-id="iframe" class="montage-youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed" frameborder="0" allowfullscreen></iframe>
-        <object type="application/x-shockwave-flash" data-montage-id="player" width="640" height="360">
-            <param name="allowScriptAccess" value="always">
-        </object>
-    </div>
 </body>
 </html>
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
index 2f7709d7..462dca58 100644
--- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
@@ -1,10 +1,9 @@
-//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&amp;enablejsapi=1&amp;playerapiid=ytplayer"
 /* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-/*global require,exports*/
+/*global require,exports,YT */
 var Montage = require("montage").Montage,
    Component = require("ui/component").Component;
@@ -31,7 +30,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
            return this._player;
        },
        set: function(value) {
-            // TODO don't allow this to be changed
            if (this._player !== value) {
                this._player = value;
            }
@@ -127,30 +125,36 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
        value: function() {
            // Create the callback if it doesn't exist, and make it dispatch
            // an event on the document instead
-            if (!window.onYouTubePlayerReady) {
+            if (!window.onYouTubePlayerAPIReady) {
-                window.onYouTubePlayerReady = function(playerId) {
+                window.onYouTubePlayerAPIReady = function() {
                    var event = document.createEvent("CustomEvent");
-                    event.initEvent("youtubePlayerReady", true, true);
+                    event.initEvent("youtubePlayerApiReady", true, true);
-                    event.playerId = playerId;
                    document.dispatchEvent(event);
                };
            }
-            document.addEventListener("youtubePlayerReady", this, false);
+            this._element.src +=  (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1";
-            // If there's no videoId set one the doesn't exist
+            if (typeof YT !== "undefined" && YT.Player) {
-            this._player.data = "https://www.youtube.com/v/" + (this._videoId || "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid;
+                this.handleYoutubePlayerApiReady();
+            } else {
+                document.addEventListener("youtubePlayerApiReady", this, false);
+            }
        }
    },
-    handleYoutubePlayerReady: {
+    handleYoutubePlayerApiReady: {
        value: function(event) {
-            if (event.playerId !== this.uuid) {
+            console.log("handleYoutubePlayerApiReady");
-                return;
+            document.removeEventListener("youtubePlayerApiReady", this);
-            }
+            var self = this;
-            this._ready = true;
+            this.player = new YT.Player(this._element, { events: {
-            this.needsDraw = true;
+                onReady: function(event) {
+                    self._ready = true;
+                    self.needsDraw = true;
+                }
+            }});
        }
    },
author	Stuart Knightley	2012-03-19 09:46:38 -0700
committer	Stuart Knightley	2012-03-19 09:46:38 -0700
commit	eb5cda3ce03b35c3335b91c34ead0cdf290b243e (patch)
tree	c0dd72e2d805e04c6650c2e767d2847ee51a6171 /node_modules/montage
parent	222562c734396403c18c90a1ca395a36c4d49da4 (diff)
download	ninja-eb5cda3ce03b35c3335b91c34ead0cdf290b243e.tar.gz

diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html index ae757626..ec61493c 100644 --- a/node_modules/montage/ui/youtube-player.reel/youtube-player.html +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
@@ -7,23 +7,19 @@
7	<html>	7	<html>
8	<head>	8	<head>
9	<title></title>	9	<title></title>
		10	<script src="http://www.youtube.com/player_api"></script>
10	<script type="text/montage-serialization">	11	<script type="text/montage-serialization">
11	{	12	{
12	"owner": {	13	"owner": {
13	"prototype": "montage/ui/youtube-player.reel",	14	"prototype": "montage/ui/youtube-player.reel",
14	"properties": {	15	"properties": {
15	"element": {"#": "container"},	16	"element": {"#": "iframe"}
16	"player": {"#": "player"}
17	}	17	}
18	}	18	}
19	}	19	}
20	</script>	20	</script>
21	</head>	21	</head>
22	<body>	22	<body>
23	<div data-montage-id="container" class="montage-youtube-player">	23	<iframe data-montage-id="iframe" class="montage-youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed" frameborder="0" allowfullscreen></iframe>
24	<object type="application/x-shockwave-flash" data-montage-id="player" width="640" height="360">
25	<param name="allowScriptAccess" value="always">
26	</object>
27	</div>
28	</body>	24	</body>
29	</html>	25	</html>


diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js index 2f7709d7..462dca58 100644 --- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
@@ -1,10 +1,9 @@
1	//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&enablejsapi=1&playerapiid=ytplayer"
2	/* <copyright>	1	/* <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6	</copyright> */	5	</copyright> */
7	/global require,exports/	6	/global require,exports,YT /
8	var Montage = require("montage").Montage,	7	var Montage = require("montage").Montage,
9	Component = require("ui/component").Component;	8	Component = require("ui/component").Component;
10		9
@@ -31,7 +30,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
31	return this._player;	30	return this._player;
32	},	31	},
33	set: function(value) {	32	set: function(value) {
34	// TODO don't allow this to be changed
35	if (this._player !== value) {	33	if (this._player !== value) {
36	this._player = value;	34	this._player = value;
37	}	35	}
@@ -127,30 +125,36 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
127	value: function() {	125	value: function() {
128	// Create the callback if it doesn't exist, and make it dispatch	126	// Create the callback if it doesn't exist, and make it dispatch
129	// an event on the document instead	127	// an event on the document instead
130	if (!window.onYouTubePlayerReady) {	128	if (!window.onYouTubePlayerAPIReady) {
131	window.onYouTubePlayerReady = function(playerId) {	129	window.onYouTubePlayerAPIReady = function() {
132	var event = document.createEvent("CustomEvent");	130	var event = document.createEvent("CustomEvent");
133	event.initEvent("youtubePlayerReady", true, true);	131	event.initEvent("youtubePlayerApiReady", true, true);
134	event.playerId = playerId;
135	document.dispatchEvent(event);	132	document.dispatchEvent(event);
136	};	133	};
137	}	134	}
138		135
139	document.addEventListener("youtubePlayerReady", this, false);	136	this._element.src += (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1";
140		137
141	// If there's no videoId set one the doesn't exist	138	if (typeof YT !== "undefined" && YT.Player) {
142	this._player.data = "https://www.youtube.com/v/" + (this._videoId \|\| "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid;	139	this.handleYoutubePlayerApiReady();
		140	} else {
		141	document.addEventListener("youtubePlayerApiReady", this, false);
		142	}
143	}	143	}
144	},	144	},
145		145
146	handleYoutubePlayerReady: {	146	handleYoutubePlayerApiReady: {
147	value: function(event) {	147	value: function(event) {
148	if (event.playerId !== this.uuid) {	148	console.log("handleYoutubePlayerApiReady");
149	return;	149	document.removeEventListener("youtubePlayerApiReady", this);
150	}	150
151		151	var self = this;
152	this._ready = true;	152	this.player = new YT.Player(this._element, { events: {
153	this.needsDraw = true;	153	onReady: function(event) {
		154	self._ready = true;
		155	self.needsDraw = true;
		156	}
		157	}});
154	}	158	}
155	},	159	},
156		160