Skip to content
This repository has been archived by the owner on Sep 7, 2022. It is now read-only.

Commit

Permalink
playlist 0.1 added
Browse files Browse the repository at this point in the history
  • Loading branch information
Jozef Chraplewski committed Jan 18, 2012
0 parents commit 69b279a
Show file tree
Hide file tree
Showing 5 changed files with 301 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .gitignore
@@ -0,0 +1,5 @@
.DS_Store
dist/*
dev.html
projects
.zenflow-log
1 change: 1 addition & 0 deletions README.md
@@ -0,0 +1 @@
Playlist component for video.js 3 player
55 changes: 55 additions & 0 deletions design/playlist.css
@@ -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;
}


59 changes: 59 additions & 0 deletions dev.html.example
@@ -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>
181 changes: 181 additions & 0 deletions src/playlist.js
@@ -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.