davorbadrov/checkDuration.js

## checkDuration.js
    /* global document, URL, alert */
    // TODO: Check support for video types & URL.createObjectURL() function
    // NOTE: IE9 doesn't seem to support URL object, but a polyfill seems to exist: https://gist.github.com/arv/1384398
    function getDuration(videoFile, callback) {
        'use strict';

        var type = videoFile.type;

        var videoEl = document.createElement('video');
        videoEl.preload = 'metadata';

        var canPlay = videoEl.canPlayType(type);
        canPlay = canPlay === '' ? 'no' : canPlay;

        if (canPlay === 'no') {
            alert('Your browser doesn\'t support the video format: ' + type);
        }

        if (!URL || !URL.createObjectURL) {
            alert('Your browser can\'t read the video from input'); // if not supported, use apolyfill or handle on server? how? ...
        }

        var fileUrl = URL.createObjectURL(videoFile);
        videoEl.src = fileUrl;

        videoEl.addEventListener('loadedmetadata', function() {
            callback(videoEl.duration);
        });
    }

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Duration Test</title>
</head>
<body>
    <h1>Video Duration Test</h1>
    <div class="results">
        Video Duration:
    </div>
    <input id="video-input" type="file" accept="video/*">

    <script src="checkDuration.js"></script>
    <script>
         var input = document.getElementById('video-input');

        input.addEventListener('change', function(event) {
            var file = event.target.files[0];
            getDuration(file, function(duration) {
                document.querySelector('.results').innerHTML = 'Video Duration: ' + duration + ' (in seconds)';
            });
        });
    </script>
</body>
</html>
	/* global document, URL, alert */
	// TODO: Check support for video types & URL.createObjectURL() function
	// NOTE: IE9 doesn't seem to support URL object, but a polyfill seems to exist: https://gist.github.com/arv/1384398
	function getDuration(videoFile, callback) {
	'use strict';

	var type = videoFile.type;

	var videoEl = document.createElement('video');
	videoEl.preload = 'metadata';

	var canPlay = videoEl.canPlayType(type);
	canPlay = canPlay === '' ? 'no' : canPlay;

	if (canPlay === 'no') {
	alert('Your browser doesn\'t support the video format: ' + type);
	}

	if (!URL \|\| !URL.createObjectURL) {
	alert('Your browser can\'t read the video from input'); // if not supported, use apolyfill or handle on server? how? ...
	}

	var fileUrl = URL.createObjectURL(videoFile);
	videoEl.src = fileUrl;

	videoEl.addEventListener('loadedmetadata', function() {
	callback(videoEl.duration);
	});
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Video Duration Test</title>
	</head>
	<body>
	<h1>Video Duration Test</h1>
	<div class="results">
	Video Duration:
	</div>
	<input id="video-input" type="file" accept="video/*">

	<script src="checkDuration.js"></script>
	<script>
	var input = document.getElementById('video-input');

	input.addEventListener('change', function(event) {
	var file = event.target.files[0];
	getDuration(file, function(duration) {
	document.querySelector('.results').innerHTML = 'Video Duration: ' + duration + ' (in seconds)';
	});
	});
	</script>
	</body>
	</html>