This repository has been archived by the owner on Sep 7, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Jozef Chraplewski
committed
Jan 18, 2012
0 parents
commit 69b279a
Showing
5 changed files
with
301 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
.DS_Store | ||
dist/* | ||
dev.html | ||
projects | ||
.zenflow-log |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
Playlist component for video.js 3 player |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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']; | ||
} | ||
}); |