Skip to content

Instantly share code, notes, and snippets.

@dharFr

dharFr/jsbin.ehasok.html

Created July 28, 2013 17:40
Show Gist options
  • Save dharFr/6099405 to your computer and use it in GitHub Desktop.
Save dharFr/6099405 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ehasok.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A Simple Video Instant Preview Demo" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<video id="video" controls></video>
<form>
<label for="filein"> Choose a video file to preview :
<input id="filein" type="file"/>
</label>
</form>
<div id="output"></div>
</body>
</html>
Raw
jsbin.ehasok.js
(function videoPreview()
{
var video, filein, output, blobUrl;
video = document.getElementById('video');
filein = document.getElementById('filein');
ouput = document.getElementById('output');
function setOutput(txt) { ouput.textContent = txt; }
function clearOutput() { setOutput(''); }
if (!window.URL || !window.URL.createObjectURL || !filein.files)
{
setOutput("File API isn't supported...");
return;
}
filein.addEventListener('change', function onChange(e)
{
var chosenFile = filein.files[0];
// clear current blob if it's already set
if (blobUrl)
{
window.URL.revokeObjectURL(blobUrl);
}
// Check if the browser can play selected file
if (video.canPlayType(chosenFile.type))
{
clearOutput();
blobUrl = window.URL.createObjectURL(chosenFile);
video.src = blobUrl;
}
else
{
setOutput("Your browser can't read " + chosenFile.type + " files.");
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment