sng2c · November 8, 2017 13:20
diff --git a/play_range.html b/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>