Play local (hard-drive) video file with HTML5 video tag?

Html Problem Overview

I want to achieve the following.

<video src="file:///Users/username/folder/video.webm">
</video>

The intent is that the user will be able to select a file from his/her hard drive.

And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.

Is it possible?

Html Solutions

Solution 1 - Html

It is possible to play a local video file.

<input type="file" accept="video/*"/>
<video controls autoplay></video>

When a file is selected via the input element:

'change' event is fired
Get the first File object from the input.files FileList
Make an object URL that points to the File object
Set the object URL to the video.src property
Lean back and watch :)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

(function localFileVideoPlayer() {
  'use strict'
  var URL = window.URL || window.webkitURL
  var displayMessage = function(message, isError) {
    var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
  }
  var playSelectedFile = function(event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()

video,
input {
  display: block;
}

input {
  width: 100%;
}

.info {
  background-color: aqua;
}

.error {
  background-color: red;
  color: white;
}

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*" />
<video controls autoplay></video>

Solution 2 - Html

That will be possible only if the HTML file is also loaded with the file protocol from the local user's harddisk.

If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a src attribute with the file:// protocol as that would mean you could access any file on the users computer without the user knowing which would be a huge security risk.

As Dimitar Bonev said, you can access a file if the user selects it using a file selector on their own. Without that step, it's forbidden by all browsers for good reasons. Thus, while his answer might prove useful for many people, it loosens the requirement from the code in the original question.

Solution 3 - Html

Ran in to this problem a while ago. Website couldn't access video file on local PC due to security settings (understandable really) ONLY way I could get around it was to run a webserver on the local PC (server2Go) and all references to the video file from the web were to the localhost/video.mp4

<div id="videoDiv">
     <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
	</div>
<!--End videoDiv-->

Not an ideal solution but worked for me.

Solution 4 - Html

I tried to simplify the answer of Dimitar Bonev as much as I could.

<html>
<head>
<title>HTML5 local video file player example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>HTML5 local video file player example</h1>
<input type="file" accept="video/*"><br>
<video controls></video>
<script type="text/javascript">
 (function localFileVideoPlayer() {
   'use strict'
   var playSelectedFile = function(event) {
   var file = this.files[0]
   var URL = window.URL || window.webkitURL 
   var fileURL = URL.createObjectURL(file)
   var videoNode = document.querySelector('video')
   videoNode.src = fileURL
   }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
 })()
</script>
<p>I hereby signed confess solemnly that I have no idea what this code does. But it now works. 
<p>Firefox Lubuntu 18.03
<p>Simplified: `http://jsfiddle.net/dsbonev/cCCZ2/` `https://stackoverflow.com/users/691308/dimitar-bonev`
</body>
</html>

Content Type	Original Author	Original Content on Stackoverflow
Question	Chris	View Question on Stackoverflow
Solution 1 - Html	Dimitar Bonev	View Answer on Stackoverflow
Solution 2 - Html	Holger Just	View Answer on Stackoverflow
Solution 3 - Html	jcoshea	View Answer on Stackoverflow
Solution 4 - Html	xerostomus	View Answer on Stackoverflow