dharFr/jsbin.ehasok.html

## 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>

## 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.");
    }
  });
})();
	<!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>
	(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.");
	}
	});
	})();