Permalink
Browse files

playlist 0.1 added

  • Loading branch information...
0 parents commit 69b279abba0595ace7987ac06bf26b6425797888 Jozef Chraplewski committed Jan 18, 2012
Showing with 301 additions and 0 deletions.
  1. +5 −0 .gitignore
  2. +1 −0 README.md
  3. +55 −0 design/playlist.css
  4. +59 −0 dev.html.example
  5. +181 −0 src/playlist.js
@@ -0,0 +1,5 @@
+.DS_Store
+dist/*
+dev.html
+projects
+.zenflow-log
@@ -0,0 +1 @@
+Playlist component for video.js 3 player
@@ -0,0 +1,55 @@
+.vjs-playlist {
+ background-color: black;
+ position: absolute;
+ overflow-y: hidden;
+ overflow-x: auto;
+ display: none;
+}
+
+.vjs-playlist .wrapper {
+ border: 1px solid red;
+}
+
+.vjs-playlist img {
+ margin: 10px;
+ border: 3px solid #555;
+ border-radius: 6px;
+ -moz-border-radius: 6px;
+ width: 125px;
+ height: 95px;
+}
+
+.vjs-playlist img:hover {
+ float: left;
+ border: 3px solid #777;
+ cursor: pointer;
+ border-radius: 6px;
+ -moz-border-radius: 6px;
+}
+
+.clear { clear: both }
+
+/* Scrollbar
+---------------------------------------------------------*/
+
+
+.vjs-playlist.webkit-scrollbar::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+.vjs-playlist.webkit-scrollbar::-webkit-scrollbar-button:start:decrement,
+.vjs-playlist::-webkit-scrollbar-button:end:increment {
+ display: none;
+}
+
+.vjs-playlist.webkit-scrollbar::-webkit-scrollbar-track-piece {
+ background-color: #3b3b3b;
+ -webkit-border-radius: 6px;
+}
+
+.vjs-playlist.webkit-scrollbar::-webkit-scrollbar-thumb {
+ -webkit-border-radius: 6px;
+ background: #666 no-repeat center;
+}
+
+
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>HTML5 Video Player</title>
+
+ <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
+ <script src="http://vjs.zencdn.net/c/video.js"></script>
+
+ <!-- playlist stuff -->
+ <link href="design/playlist.css" rel="stylesheet" type="text/css">
+ <script src="src/playlist.js"></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":""}]'/>
+
+ <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":""}]'/>
+
+ <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='{}'>
+ <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>
+</html>
@@ -0,0 +1,181 @@
+// add playlist to vj's components'
+_V_.options.components.push("playlist")
+
+_V_.PlaylistEngine = _V_.Class.extend({
+ init: function(player, videos) {
+ this.player = player;
+ this.videos = videos;
+ this.currentIndex = 0;
+ },
+
+ play: function(index) {
+ this.currentIndex = index;
+ this.updateVideo();
+ },
+
+ pause: function() {
+ this.player.pause();
+ },
+
+ next: function() {
+ this.incrementCurrentIndex();
+ this.updateVideo();
+ },
+
+ prev: function() {
+ this.decrementCurrentIndex();
+ this.updateVideo();
+ },
+
+ reload: function() {
+ this.pause();
+ this.player.load();
+ var that = this;
+ setTimeout(function() { that.player.play() }, 500);
+ },
+
+ incrementCurrentIndex: function() {
+ this.currentIndex++;
+ // play first video when playlist reaches end
+ if (this.currentIndex >= this.videos.length) {
+ this.currentIndex = 0;
+ };
+ },
+
+ decrementCurrentIndex: function() {
+ this.currentIndex--;
+ if (this.currentIndex < 0) {
+ this.currentIndex = this.videos.length - 1;
+ };
+ },
+
+ updateVideo: function() {
+ this.updateVideoSrc();
+ this.updateVideoPoster();
+ this.reload();
+ },
+
+ updateVideoSrc: function() {
+ 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();
+ this.player.tag.poster = newPoster;
+ }
+});
+
+_V_.Playlist = _V_.Component.extend({
+ init: function(player, options) {
+ this._super(player, options);
+
+ // 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() },
+
+ show: function() {
+ this.enableWebkitScrollbar();
+ // calculate width based on number of thumbs in the playlist
+ this.wrapperEl.style.width = this.calculateWrapperWidth() + "px";
+
+ // playlist width should be the same as video
+ this.setWidth(this.player.width())
+
+ this.setPosition();
+ this._super();
+ },
+
+ calculateWrapperWidth: function() {
+ return (this.videos.length * 155);
+ },
+
+ setPosition: function() {
+ this.el.style.bottom = this.hasScrollbar() ? "-134px" : "-124px";
+ },
+
+ createElement: function() {
+ // find playlist tag
+ this.wrapperEl = document.getElementById(this.player.el.id + "_playlist");
+ var id = this.wrapperEl.attributes.id.value;
+ // transform it into the wrapper tag
+ this.wrapperEl.removeAttribute('id');
+ this.wrapperEl.setAttribute('class', "playlist-wrapper");
+
+ var el = this._super("div", { id: id });
+
+ // add playlist-wrapper to main playlist tag
+ el.appendChild(this.wrapperEl);
+ return el;
+ },
+
+ hasScrollbar: function() {
+ var wrapperWidth = parseInt(this.wrapperEl.style.width);
+ var width = parseInt(this.el.style.width);
+ return wrapperWidth > width;
+ },
+
+ enableWebkitScrollbar: function() {
+ // webkit scrollbar doesn't work nice on my android tablet..
+ if (_V_.isAndroid()) {
+ var cssClass = "vjs-playlist";
+ } else {
+ var cssClass = "vjs-playlist webkit-scrollbar";
+ };
+ _V_.addClass(this.el, cssClass);
+ },
+
+ 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;
+ },
+
+ setWidth: function(width) {
+ this.el.style.width = width + "px";
+ }
+});
+
+_V_.PlaylistThumb = _V_.Component.extend({
+ init: function(player, options) {
+ this._super(player, options);
+
+ this.index = options.index;
+ _V_.addEvent(this.el, "click", _V_.proxy(this, this.onClick));
+ },
+
+ onClick: function() {
+ this.player.playlist.play(this.index);
+ },
+
+ sources: function() {
+ return JSON.parse(this.el.dataset['sources']);
+ },
+
+ poster: function() {
+ return this.el.dataset['poster'];
+ }
+});

0 comments on commit 69b279a

Please sign in to comment.