Permalink
Browse files

playlist as JSON

README updated
  • Loading branch information...
1 parent 1d4ed2c commit 6fdc3a9532b2a5d0e889503d7ef5957f007e69a1 Jozef Chraplewski committed May 28, 2012
Showing with 111 additions and 95 deletions.
  1. +23 −14 README.md
  2. +62 −45 dev.html.example
  3. +26 −36 src/playlist.js
View
@@ -17,20 +17,29 @@ after videojs:
</head>
....
-
-Next, add 'playlist' object to vjs's components:
-
- <script type="text/javascript">
- _V_.options.components.playlist = {};
- </script>
-
-Now put your playlist into the body tag. Playlist is represented as a
-div tag with img elements. Make sure that you
-added proper id attribute to your playlist tag (for video tag with
-id='vid1' playlist is represented as a div with id="vid1_playlist"). Each img element
-represents playlist's video item. All necessary data required by
-video.js are included in img's data attributes. See dev.example.html
-
+## Embedding playlist
+
+Playlist should be embedded as a video's data-setup attribute e.g
+
+ <video data-setup='{
+ "playlist": [
+ {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "sources":[
+ {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""
+ },
+ {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
+ "type":"video/ogg",
+ "media":"",
+ "title":""
+ }
+ ]
+ }
+ ]}'
+ ...
## API
View
@@ -9,54 +9,71 @@
<link href="design/playlist.css" rel="stylesheet" type="text/css">
<script src="src/playlist.js"></script>
-
- <script type="text/javascript">
- _V_.options.components.playlist = {};
- </script>
</head>
-<body>
- <div id="vid1_playlist" class="vjs-playlist">
- <img src="http://video-js.zencoder.com/oceans-clip.png"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://video-js.zencoder.com/oceans-clip.mp4",
- "type":"video/mp4", "media":"", "title":""},
- {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
- "type":"video/ogg", "media":"", "title":""}]'/>
-
- <img src="http://view.staging.vzaar.com/438562.thumb"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://view.staging.vzaar.com/438562/video",
- "type":"video/mp4", "media":"", "title":""}]'/>
-
- <img src="http://video-js.zencoder.com/oceans-clip.png"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://video-js.zencoder.com/oceans-clip.mp4",
- "type":"video/mp4", "media":"", "title":""},
- {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
- "type":"video/ogg", "media":"", "title":""}]'/>
-
- <img src="http://view.staging.vzaar.com/438562.thumb"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://view.staging.vzaar.com/438562/video",
- "type":"video/mp4", "media":"", "title":""}]'/>
- <img src="http://video-js.zencoder.com/oceans-clip.png"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://video-js.zencoder.com/oceans-clip.mp4",
- "type":"video/mp4", "media":"", "title":""}]'/>
-
- <img src="http://view.staging.vzaar.com/438562.thumb"
- data-poster="http://view.staging.vzaar.com/438562.thumb"
- data-sources='[{"src":"http://view.staging.vzaar.com/438562/video",
- "type":"video/mp4", "media":"", "title":""}]'/>
- </div>
-
- <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
- poster="http://video-js.zencoder.com/oceans-clip.png"
- data-setup='{}'>
+<body>
+ <video id="vid1"
+ class="video-js vjs-default-skin"
+ controls
+ preload="auto"
+ width="640"
+ height="264"
+ poster="http://video-js.zencoder.com/oceans-clip.png"
+ data-setup='{
+ "playlist":[
+ {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "sources":[
+ {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""},
+ {"src":"http://video-js.zencoder.com/oceans-clip.ogv",
+ "type":"video/ogg",
+ "media":"",
+ "title":""
+ }
+ ]
+ },
+ {"thumb_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
+ "poster_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
+ "sources":[
+ {"src":"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""}
+ ]
+ },
+ {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "sources":[
+ {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""}
+ ]
+ },
+ {"thumb_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
+ "poster_url":"http://d1p69vb2iuddhr.cloudfront.net/assets/demo/midnight_sun_800-b6c47c7ce67c56d909dadb21aa350eaa.jpg",
+ "sources":[
+ {"src":"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""}
+ ]
+ },
+ {"thumb_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "poster_url":"http://video-js.zencoder.com/oceans-clip.png",
+ "sources":[
+ {"src":"http://video-js.zencoder.com/oceans-clip.mp4",
+ "type":"video/mp4",
+ "media":"",
+ "title":""}
+ ]
+ }
+ ]
+ }'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
- <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
<p>Video Playback Not Supported</p>
</video>
</body>
View
@@ -57,14 +57,14 @@ _V_.PlaylistEngine = _V_.Class.extend({
},
updateVideoSrc: function() {
- var sources = this.videos[this.currentIndex].sources();
+ var sources = this.videos[this.currentIndex].sources;
// check new sources
this.player.src(sources);
this.player.triggerReady();
},
updateVideoPoster: function() {
- var newPoster = this.videos[this.currentIndex].poster();
+ var newPoster = this.videos[this.currentIndex].poster_url;
this.player.tag.poster = newPoster;
}
});
@@ -76,16 +76,15 @@ _V_.Playlist = _V_.Component.extend({
// attach playlist to the player
this.player.playlist = this;
- this.videos = this.getVideos();
// attach engine
this.engine = new _V_.PlaylistEngine(this.player, this.videos);
this.show();
},
play: function(index) { this.engine.play(index) },
pause: function() { this.player.pause() },
- next: function() { this.playlist.next() },
- prev: function() { this.playlist.prev() },
+ next: function() { this.engine.next() },
+ prev: function() { this.engine.prev() },
show: function() {
this.enableWebkitScrollbar();
@@ -97,26 +96,22 @@ _V_.Playlist = _V_.Component.extend({
},
createElement: function() {
- this.wrapperEl = this.findPlaylistEl();
-
- var id = this.wrapperEl.attributes.id.value;
- // transform it into the wrapper tag
- this.wrapperEl.removeAttribute('id');
- this.wrapperEl.setAttribute('class', "playlist-wrapper");
+ this.videos = this.getVideos();
+ var id = this.player.el.id +"_playlist";
var el = this._super("div", { id: id });
+ this.wrapperEl = this._super("div", { className: "playlist-wrapper" })
+
+ for (i in this.videos) {
+ var thumb = new _V_.PlaylistThumb(this.player, this.videos[i], i)
+ this.wrapperEl.appendChild(thumb.el);
+ };
// add playlist-wrapper to main playlist tag
el.appendChild(this.wrapperEl);
return el;
},
- findPlaylistEl: function() {
- var el = document.getElementById(this.player.el.id + "_playlist");
- if (!el) { throw Error("Playlist element not found") };
- return el;
- },
-
hasScrollbar: function() {
var wrapperWidth = parseInt(this.wrapperEl.style.width);
var width = parseInt(this.el.style.width);
@@ -134,20 +129,7 @@ _V_.Playlist = _V_.Component.extend({
},
getVideos: function() {
- if (this.videos) {
- return this.videos;
- } else {
- this.videos = [];
- var videoTags = this.wrapperEl.children;
- for (var i=0; i < videoTags.length; i++) {
- var thumb = new _V_.PlaylistThumb(this.player, {
- el: videoTags[i],
- index: i
- });
- this.videos.push(thumb);
- };
- };
- return this.videos;
+ return this.player.options.playlist;
},
setWidth: function(width) {
@@ -176,22 +158,30 @@ _V_.Playlist = _V_.Component.extend({
});
_V_.PlaylistThumb = _V_.Component.extend({
- init: function(player, options) {
- this._super(player, options);
+ init: function(player, params, index) {
+ this.params = params;
+ this.index = index;
+ this._super(player);
- this.index = options.index;
_V_.addEvent(this.el, "click", _V_.proxy(this, this.onClick));
},
+ createElement: function(){
+ this.el = this._super("img", { src: this.params.thumb_url });
+ return this.el;
+ },
+
onClick: function() {
this.player.playlist.play(this.index);
},
sources: function() {
- return JSON.parse(this.el.dataset['sources']);
+ return this.params.sources;
},
poster: function() {
- return this.el.dataset['poster'];
+ return this.params.poster;
}
});
+
+_V_.options.components.playlist = {};

0 comments on commit 6fdc3a9

Please sign in to comment.