sng2c/play_range.html

## play_range.html
<!DOCTYPE html>
<html>
<head>
	<title>S2V</title>
	<style type="text/css">
		#player {
			width: 500px;
			height: 500px;
			background-color: #000000;
		}
		#seekbar {
			width: 500px;
			height: 50px;
			border: solid 1px black;
		}
		#bar {
			width: 0px;
			height: 100%;
			background-color: red;
		}
		video.clip {
			width:100%;
			height:100%;
		}
	</style>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="coffeescript.js"></script>
	<script type="text/coffeescript">
		class Layer
			constructor: () ->
				@items=[]
			duration: () ->
				return @items[@items.length-1].end()
			add: (item) ->
				if item.offset == -1
					if @items.length == 0
						item.offset = 0
					else
						item.offset = @items[@items.length-1].end()
				@items.push(item)

			seek: (time) ->
				for item in @items
					console.log item
					item.hide()
				item = @getItemOn(time)
				if item?
					item.media.show()
					return item.seek(time)
				else
					return false

			getItemOn: (time) ->
				for item in @items when item.contains(time)
					return item
				console.log "getItemOn null #{time}"
				return null


		class Item
			constructor: (@offset, @media) ->

			end: ()->
				return @offset + @media.duration()

			contains: (time)->
				return time >= @offset and time < @end()

			show: ()->
				@media.show()

			hide: ()->
				@media.hide()

			seek: (time)->
				if @contains(time)?
					console.log "Item.seek contains #{time} #{@offset}"
					@media.seek(time-@offset)
					return true
				else
					console.log "Item.seek not contains #{time}"
					return false


		class Video
			constructor: (@url, @from=0, @to) ->
				@video = $("<video class=\"clip\" preload=\"metadata\" _controls src=\"#{@url}\"/>")
				@seek(@from)

				$(@video).on 'timeupdate', (ev) =>
					if @to? and ev.target.currentTime > @to
						@video[0].pause()

			play: (time) ->
				seek(time) if time?
				if @to < @video[0].currentTime
					@seek(0)
				@video[0].play()

			seek: (time) ->
				if time > @to
					time = @to
				@video[0].currentTime = @from+time

			show: () ->
				$(@video).show()

			hide: () ->
				$(@video).hide()

			duration: () ->
				return @to - @from

			getElement: () ->
				return @video


		playnext = (playlist, vidx=0)->

			if playlist.length == vidx
				return -1

			playlist[vidx].video.on 'pause', ->
				playnext(playlist, vidx+1)

			v.hide() for v in playlist
			playlist[vidx].video.show()
			playlist[vidx].play()
			return vidx

		$ ->
			$('button').click ->
				time = parseFloat($('#time').val())
				console.log layer.seek(time)

			items = [
				new Item(0, new Video("sample.mp4",0,2)),
				new Item(3, new Video("sample.mp4",2,10)),
				new Item(13, new Video("sample.mp4",10,15)),
			]
			console.log items

			layer = new Layer
			for item in items
				layer.add(item)

			console.log layer.duration()

			for item in layer.items
				$('#player').append(item.media.getElement())

			layer.seek(0)

			seek_handler = (ev)->
				if ev.buttons==1
					per = ev.offsetX / $('#seekbar').width()
					console.log ev.offsetX
					$('#bar').width(ev.offsetX)
					layer.seek(layer.duration()*per)
			$('#seekbar').mousemove seek_handler

	</script>

</head>
<body>
	<div id="player"></div>
	<div id="seekbar"><div id="bar"></div></div>
	<input type="text" id='time'>
	<button>BUT</button>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>S2V</title>
	<style type="text/css">
	#player {
	width: 500px;
	height: 500px;
	background-color: #000000;
	}
	#seekbar {
	width: 500px;
	height: 50px;
	border: solid 1px black;
	}
	#bar {
	width: 0px;
	height: 100%;
	background-color: red;
	}
	video.clip {
	width:100%;
	height:100%;
	}
	</style>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="coffeescript.js"></script>
	<script type="text/coffeescript">
	class Layer
	constructor: () ->
	@items=[]
	duration: () ->
	return @items[@items.length-1].end()
	add: (item) ->
	if item.offset == -1
	if @items.length == 0
	item.offset = 0
	else
	item.offset = @items[@items.length-1].end()
	@items.push(item)

	seek: (time) ->
	for item in @items
	console.log item
	item.hide()
	item = @getItemOn(time)
	if item?
	item.media.show()
	return item.seek(time)
	else
	return false

	getItemOn: (time) ->
	for item in @items when item.contains(time)
	return item
	console.log "getItemOn null #{time}"
	return null


	class Item
	constructor: (@offset, @media) ->

	end: ()->
	return @offset + @media.duration()

	contains: (time)->
	return time >= @offset and time < @end()

	show: ()->
	@media.show()

	hide: ()->
	@media.hide()

	seek: (time)->
	if @contains(time)?
	console.log "Item.seek contains #{time} #{@offset}"
	@media.seek(time-@offset)
	return true
	else
	console.log "Item.seek not contains #{time}"
	return false


	class Video
	constructor: (@url, @from=0, @to) ->
	@video = $("<video class=\"clip\" preload=\"metadata\" _controls src=\"#{@url}\"/>")
	@seek(@from)

	$(@video).on 'timeupdate', (ev) =>
	if @to? and ev.target.currentTime > @to
	@video[0].pause()

	play: (time) ->
	seek(time) if time?
	if @to < @video[0].currentTime
	@seek(0)
	@video[0].play()

	seek: (time) ->
	if time > @to
	time = @to
	@video[0].currentTime = @from+time

	show: () ->
	$(@video).show()

	hide: () ->
	$(@video).hide()

	duration: () ->
	return @to - @from

	getElement: () ->
	return @video



	playnext = (playlist, vidx=0)->

	if playlist.length == vidx
	return -1

	playlist[vidx].video.on 'pause', ->
	playnext(playlist, vidx+1)

	v.hide() for v in playlist
	playlist[vidx].video.show()
	playlist[vidx].play()
	return vidx

	$ ->
	$('button').click ->
	time = parseFloat($('#time').val())
	console.log layer.seek(time)

	items = [
	new Item(0, new Video("sample.mp4",0,2)),
	new Item(3, new Video("sample.mp4",2,10)),
	new Item(13, new Video("sample.mp4",10,15)),
	]
	console.log items

	layer = new Layer
	for item in items
	layer.add(item)

	console.log layer.duration()

	for item in layer.items
	$('#player').append(item.media.getElement())

	layer.seek(0)

	seek_handler = (ev)->
	if ev.buttons==1
	per = ev.offsetX / $('#seekbar').width()
	console.log ev.offsetX
	$('#bar').width(ev.offsetX)
	layer.seek(layer.duration()*per)
	$('#seekbar').mousemove seek_handler

	</script>

	</head>
	<body>
	<div id="player"></div>
	<div id="seekbar"><div id="bar"></div></div>
	<input type="text" id='time'>
	<button>BUT</button>
	</body>
	</html>