Play local hard-drive video file with HTML5 video tag

Question

I want to achieve the following    lt video src  file    Users username folder video webm  gt   lt  video gt    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

User · Accepted Answer

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/

_x000D_

(function localFileVideoPlayer() {_x000D_
  'use strict'_x000D_
  var URL = window.URL || window.webkitURL_x000D_
  var displayMessage = function(message, isError) {_x000D_
    var element = document.querySelector('#message')_x000D_
    element.innerHTML = message_x000D_
    element.className = isError ? 'error' : 'info'_x000D_
  }_x000D_
  var playSelectedFile = function(event) {_x000D_
    var file = this.files[0]_x000D_
    var type = file.type_x000D_
    var videoNode = document.querySelector('video')_x000D_
    var canPlay = videoNode.canPlayType(type)_x000D_
    if (canPlay === '') canPlay = 'no'_x000D_
    var message = 'Can play type "' + type + '": ' + canPlay_x000D_
    var isError = canPlay === 'no'_x000D_
    displayMessage(message, isError)_x000D_
_x000D_
    if (isError) {_x000D_
      return_x000D_
    }_x000D_
_x000D_
    var fileURL = URL.createObjectURL(file)_x000D_
    videoNode.src = fileURL_x000D_
  }_x000D_
  var inputNode = document.querySelector('input')_x000D_
  inputNode.addEventListener('change', playSelectedFile, false)_x000D_
})()

_x000D_

video,_x000D_
input {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
input {_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
.info {_x000D_
  background-color: aqua;_x000D_
}_x000D_
_x000D_
.error {_x000D_
  background-color: red;_x000D_
  color: white;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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   lt div id  videoDiv  gt        lt video id  video  src  http   127 0 0 1 4001 videos  lt  php  videoFileName  gt   width  70   controls gt       lt  div gt   lt  --End videoDiv-- gt    Not an ideal solution but worked for me

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

Examples related to html

Examples related to video

Examples related to html5-video

Examples related to offline