video-thumbnails.html
matmarex (Bartosz Dziewoński)
Actions

Authored By

	• matmarex
	Jul 19 2016, 11:52 PM

Size

1 KB

Referenced Files

None

Subscribers

None

video-thumbnails.html
View Options

	<!doctype html>
	<html>
	<meta charset="utf-8">
	<body>
	<p>Choose a large number of video files here: <input type="file" multiple id="files"></p>
	<p>Thumbnails will appear below: (and exceptions will appear in your browser console)</p>
	<div id="thumbnails"></div>
	<script>
	var filesInput = document.getElementById( 'files' );
	var thumbnailsContainer = document.getElementById( 'thumbnails' );

	filesInput.addEventListener( 'change', function () {
	for ( var i = 0; i < filesInput.files.length; i++ ) {
	thumbnailVideo( filesInput.files[i] );
	}
	}, true );

	function thumbnailVideo( file ) {
	var first = true;
	var video = document.createElement( 'video' );

	video.addEventListener( 'loadedmetadata', function () {
	// seek 2 seconds into video or to half if shorter
	video.currentTime = Math.min( 2, video.duration / 2 );
	video.volume = 0;
	} );
	video.addEventListener( 'seeked', function () {
	if ( first ) {
	first = false;
	video.currentTime = Math.min( 2, video.duration / 2 );
	return;
	}
	setTimeout( function () {
	var canvas = document.createElement( 'canvas' );
	var context = canvas.getContext( '2d' );
	canvas.width = 100;
	canvas.height = Math.round( canvas.width * video.videoHeight / video.videoWidth );
	context.drawImage( video, 0, 0, canvas.width, canvas.height );
	window.URL.revokeObjectURL( video.url );
	thumbnailsContainer.appendChild( canvas );
	}, 500 );
	} );

	url = window.URL.createObjectURL( file );
	video.src = url;
	}

	</script>
	</body>
	</html>