Menu

Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Edit

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
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>