Putar file video lokal (hard-drive) dengan tag video HTML5?

Saya ingin mencapai yang berikut.

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

Tujuannya adalah agar pengguna dapat memilih file dari hard drive-nya.

Dan alasan tidak mengupload tentu saja biaya transmisi dan kuota penyimpanan. Tidak ada alasan untuk menyimpan file.

Apa itu mungkin?

Dimungkinkan untuk memutar file video lokal.

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

Ketika file dipilih melalui inputelemen:

1. acara 'perubahan' dipecat
2. Dapatkan objek File pertama dari input.files FileList
3. Buat URL objek yang mengarah ke objek File
4. Setel URL objek ke video.srcproperti

5. Bersandar dan perhatikan :)

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>

Itu hanya mungkin jika file HTML juga dimuat dengan fileprotokol dari harddisk pengguna lokal.

Jika halaman HTML disajikan oleh HTTP dari server, Anda tidak dapat mengakses file lokal apa pun dengan menentukannya dalam srcatribut dengan file://protokol karena itu berarti Anda dapat mengakses file apa pun di komputer pengguna tanpa pengguna mengetahui mana yang akan menjadi risiko keamanan yang sangat besar.

Seperti yang dikatakan Dimitar Bonev, Anda dapat mengakses file jika pengguna memilihnya menggunakan pemilih file mereka sendiri. Tanpa langkah itu, itu dilarang oleh semua browser karena alasan yang bagus. Jadi, meskipun jawabannya mungkin terbukti bermanfaat bagi banyak orang, ini melonggarkan persyaratan dari kode dalam pertanyaan awal.

Mengalami masalah ini beberapa waktu lalu. Situs web tidak dapat mengakses file video di PC lokal karena pengaturan keamanan (benar-benar dapat dimengerti) HANYA cara saya bisa menyiasatinya adalah dengan menjalankan server web di PC lokal (server2Go) dan semua referensi ke file video dari web adalah ke 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-->

Bukan solusi yang ideal tetapi berhasil untuk saya.