Skip to content

Commit

Permalink
Revert "Tweaked some simple items in the README for better readability"
Browse files Browse the repository at this point in the history
This reverts commit 5419f9b.
  • Loading branch information
dmolsen committed Dec 19, 2011
1 parent 5419f9b commit 6f70988
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 19 deletions.
34 changes: 17 additions & 17 deletions 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`.

```<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="YoutubePlayer.js"></script>```
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="YoutubePlayer.js"></script>

For each video that is to be embedded on the page, add a placeholder div element on the page and give it an `id`.

```<div id="inception"></div>
<div id="easyA"></div>```
<div id="inception"></div>
<div id="easyA"></div>

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/).

Expand Down
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -35,7 +35,7 @@ <h2>YouTube Video Timed Events Example</h2>

<p>
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 <a href="https://github.com/dmolsen/YoutubePlayer">YouTubePlayer</a>, <a href="http://code.google.com/p/swfobject/">SWFObject</a>,
end of the day this is the equivalent of a stupid pet trick but I did make it work. This example uses <a href="https://github.com/dmolsen/YoutubePlayer">YoutubePlayer</a>, <a href="http://code.google.com/p/swfobject/">SWFObject</a>,
and the <a href="http://code.google.com/apis/youtube/js_api_reference.html">YouTube JavaScript API</a>.
</p>

Expand Down
2 changes: 1 addition & 1 deletion scripts/YoutubePlayer.js
Expand Up @@ -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.');
Expand Down

0 comments on commit 6f70988

Please sign in to comment.