diff --git a/README.md b/README.md index 5779584..c679ab5 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,53 @@ ## About -YouTubePlayer is a JavaScript wrapper for YouTube's flash player that provides a simple interface for listening to the video playback events from YouTube's JavaScript API. You can add multiple videos on the page by creating an object of YouTubePlayer for each video, and can subscribe to events on that object. You can also also listen to the video time to launch events to happen at certain moments of a video. +YoutubePlayer is a JavaScript wrapper for YouTube's flash player that provides a simple interface for listening to the video playback events from YouTube's JavaScript API. You can add multiple videos on the page by creating an object of YoutubePlayer for each video, and can subscribe to events on that object. You can also also listen to the video time to launch events to happen at certain moments of a video. -Thanks to James Coglan for coming up with some [great ideas](http://blog.jcoglan.com/2008/05/22/dispatching-youtube-api-events-to-individual-javascript-objects/) on overcoming the limited Flash-JavaScript communication offered by the YouTube APIs with a very well designed interface. Thanks to Anurag Mishra for putting together the [initial release](https://github.com/AnuragMishra/YoutubePlayer). Thanks to Ryan Schneider for [providing code](https://github.com/ryanschneider/YoutubePlayer/blob/master/YoutubePlayer.js) to customize the player. +Thanks to James Coglan for coming up with some [great ideas](http://blog.jcoglan.com/2008/05/22/dispatching-youtube-api-events-to-individual-javascript-objects/) on overcoming the limited Flash-JavaScript communication offered by the YouTube APIs with a very well designed interface. Thanks to Anurag Mishra for putting together the [initial release](https://github.com/AnuragMishra/YoutubePlayer).Thanks to Ryan Schneider for [providing code](https://github.com/ryanschneider/YoutubePlayer/blob/master/YoutubePlayer.js) to customize the player. ## Usage Include `YoutubePlayer.js` and its dependency `SWFObject`. -``` -``` + + For each video that is to be embedded on the page, add a placeholder div element on the page and give it an `id`. -```
-
``` +
+
-To replace the placeholder div with the actual flash player, simply instantiate an object of YouTubePlayer and pass it the id of the placeholder div and the id of the Youtube video. +To replace the placeholder div with the actual flash player, simply instantiate an object of YoutubePlayer and pass it the id of the placeholder div and the id of the Youtube video. -```var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM'); -var easyATrailer = new YoutubePlayer('easyA', 'DL7W6pEuAW0');``` + var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM'); + var easyATrailer = new YoutubePlayer('easyA', 'DL7W6pEuAW0'); YoutubePlayer takes an optional 3rd object parameter to overload the default behavior: -```var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM', { + var inceptionTrailer = new YoutubePlayer('inception', '66TuSJo4dZM', { width: 640, height: 360, - objparams: { allowFullScreen: "true" }, + params: { allowFullScreen: 1 }, ytparams: { rel: 0, showinfo: 0 }, attrs: { class: 'ytembed' } - });``` + }); -All fields are optional, the defaults will be used if not included. 'ytparams' are for the [YouTube Embedded Player Paramters](http://code.google.com/apis/youtube/player_parameters.html). + All fields are optional, the defaults will be used if not included. 'ytparams' are for the [YouTube Embedded Player Paramters](http://code.google.com/apis/youtube/player_parameters.html). To listen to playback events, add a handler to the above objects for the supported events. -```inceptionTrailer.on('paused', function() { + inceptionTrailer.on('paused', function() { alert("Paused Inception's trailer"); }); easyATrailer.on('playing', function() { alert("Started playing Easy-A's trailer"); - });``` + }); To listen to time events, add a handler to the above objects for the supported events. -```inceptionTrailer.at('5000', function() { + inceptionTrailer.at('5000', function() { alert("You're five seconds into the Inception trailer."); - });``` + }); See a demo of the script at [http://dmolsen.com/youtube-player/](http://dmolsen.com/youtube-player/). diff --git a/index.html b/index.html index 44148b2..5a79a2a 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

YouTube Video Timed Events Example

I've been playing around with the idea of timing events to occur on a web page to specific moments in a YouTube video. At the - end of the day this is the equivalent of a stupid pet trick but I did make it work. This example uses YouTubePlayer, SWFObject, + end of the day this is the equivalent of a stupid pet trick but I did make it work. This example uses YoutubePlayer, SWFObject, and the YouTube JavaScript API.

diff --git a/scripts/YoutubePlayer.js b/scripts/YoutubePlayer.js index 0f47dc5..c620d90 100644 --- a/scripts/YoutubePlayer.js +++ b/scripts/YoutubePlayer.js @@ -77,7 +77,7 @@ } videoUrl = videoUrl.replace('{videoId}', this.videoId); videoUrl = videoUrl.replace('{playerId}', this.id); - videoUrl = videoUrl.replace('{yturlparams}', yturlparams); + videoUrl = videoUrl.replace('{yturlparams', yturlparams); if(!swfobject) { throw new ReferenceError('YoutubePlayer depends on the SWFObject library but it is missing.');