Permalink
Browse files

Merge pull request #24 from secretrobotron/t1073

[#1073] Add documentation for smart support of multiple media sources
  • Loading branch information...
2 parents e6258f4 + 5653371 commit b556e2a593c0f84d9cbba3bf1e85171c9f1a9b2a @dseif dseif committed Jul 19, 2012
Showing with 34 additions and 4 deletions.
  1. +34 −4 players/_posts/2012-12-12-smart.md
View
38 players/_posts/2012-12-12-smart.md
@@ -7,19 +7,21 @@ title: smart
The Smart player allows the use of any existing player without specifying which player.
-The idea is that Smart will try to find an acceptable player, given the id and url. Smart requires players to implement a \_canPlayType( containerType, url ) function, along side \_setup. This function returns true or false if the player can play this, given the container and url. A player that does not implement a \_canPlayType will return undefined, which is inconclusive if the player can play it or not. Each player also exposes a canPlayType( container, url ) function that developer can use to query if their data can be played or not.
+The idea is that Smart will try to find an acceptable player, given the id and url. Smart requires players to implement a `_canPlayType( containerType, url )` function, along side `_setup`. This function returns true or false if the player can play this, given the container and url. A player that does not implement a `_canPlayType` will return undefined, which is inconclusive if the player can play it or not. Each player also exposes a `_canPlayType( container, url )` function that developer can use to query if their data can be played or not.
Smart will also work with video elements, and attempt to create an HTML5 video experience if possible. In this case, the container can be a video element or a div. If it is a div, a video element will be created and appended to the supplied div.
+The _url_ paramter can be a string representing the media url, or an array of strings if multiple urls are applicable. For instance, different browsers support different codecs for HTML5 video, so different encodings of the same video they can be listed in sequence as the url parameter -- much like they can with the video tag by adding multiple <source> children. This function will test each url to see if Popcorn (and the browser) is capable of playing it, and select the first applicable url to be the player's source. Note that it is not necessary to use a list of media urls of the same type; using HTML5 media mixed with youtube, vimeo, etc. is acceptable.
+
## Options ##
* **id** \[String\] - the id of the HTML element that the appropriate player will populate
-* **url** \[String\] - the url of the media you wish to use
+* **url** \[String | Array\] - the url of the media you wish to use. If this parameter is an array, each entry will be analyzed to see if Popcorn has the ability to play it through standard HTML5 video/audio, or through a registered Popcorn player (using `_canPlayType` as mentioned above).
## Examples ##
{% highlight js linenos %}
- var pop = Popcorn.smart( "#video", "http://www.youtube.com/watch?v=9oar9glUCL0" );
+ var pop = Popcorn.smart( "#container", "http://www.youtube.com/watch?v=9oar9glUCL0" );
pop.footnote({
start: 1,
@@ -37,7 +39,35 @@ Smart will also work with video elements, and attempt to create an HTML5 video e
pop.footnote({
start: 1,
end: 5,
- text: "Works with youtube!",
+ text: "Works with webm!",
+ target: "footnote-div"
+ });
+
+ pop.play();
+{% endhighlight %}
+
+
+{% highlight js linenos %}
+ var pop = Popcorn.smart( "#video", [ "media.webm", "media.ogv", "media.mp4" ] );
+
+ pop.footnote({
+ start: 1,
+ end: 5,
+ text: "Works with multiple video sources!",
+ target: "footnote-div"
+ });
+
+ pop.play();
+{% endhighlight %}
+
+
+{% highlight js linenos %}
+ var pop = Popcorn.smart( "#video", [ "media.webm", "http://www.youtube.com/watch?v=9oar9glUCL0", "media.ogv", "media.mp4" ] );
+
+ pop.footnote({
+ start: 1,
+ end: 5,
+ text: "Works with mixed multiple video sources!",
target: "footnote-div"
});

0 comments on commit b556e2a

Please sign in to comment.