Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar
Video Playlist
Video Playlist is a wrapper for Maslosoft Video Playlist JavaScript library for creating sequential player out of video links from YouTube, Vimeo and possibly other providers.
This example features also videoThumb binding, which will
set element background image to video thumbnail extracted from provided video URL.
NOTE: CSS is not included in this package!
|
|
Remove |
Fill url into field below to add video
Add some videos to initialize playlist
Relevant code used in examples:
<table data-bind="foreach: binder.model.list.videos" class="table table-condensed">
<tr>
<td class="col-xs-1">
<div data-bind="videoThumb: url" style="height:67px;width:100px;background-size:cover;display:inline-block;">
</div>
</td>
<td>
<input data-bind="textInput: url" style="width: 50%;"/>
</td>
<td class="col-xs-1">
<a href="#" class="remove">Remove</a>
</td>
</tr>
</table>
<!--A bit of layout to make player smaller-->
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-8">
<div data-bind="videoPlaylist: binder.model.list.videos">
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-8">
<div data-bind="videoPlaylist: {data: binder.model.list.videos, urlField: 'url', titleField: 'title'}">
</div>
</div>
</div>
<script>
window.onload = (function () {
var list = new Maslosoft.Koe.Videos;
list.videos.push(new Maslosoft.Koe.Video({url: 'https://vimeo.com/181612110'}));
list.videos.push(new Maslosoft.Koe.Video({url: 'https://www.youtube.com/watch?v=RzpRU347BDU'}));
binder.model.list = list;
ko.applyBindings({model: binder.model}, document.getElementById('ko-binder'));
$(document).on('click', '.remove', function(e){
var model = ko.dataFor(e.currentTarget);
console.log(model);
binder.model.list.videos.remove(model);
e.preventDefault();
});
$(document).on('click', '.add', function(e){
url = $('#newVideo').val();
console.log(url);
if(!url){
return false;
}
var model = new Maslosoft.Koe.Video({url: url});
binder.model.list.videos.push(model);
e.preventDefault();
});
});
</script>