Відтворити локальний (жорсткий диск) відеофайл із тегом відео HTML5?

Я хочу досягти наступного.

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

Намір полягає в тому, що користувач зможе вибрати файл зі свого жорсткого диска.

І причина не завантаження - це, звичайно, вартість передачі та квота на зберігання. Причин для збереження файлу не буде.

Це можливо?

Можна відтворити локальний відеофайл.

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

Коли файл вибирається через inputелемент:

1. подія "зміни" запускається
2. Отримайте перший об’єкт File із input.files FileList
3. Створіть URL-адресу об’єкта, яка вказує на об’єкт «Файл»
4. Встановіть URL-адресу об’єкта як video.srcвластивість

5. Відкиньтесь і дивіться :)

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>

Це стане можливим, лише якщо файл HTML також завантажується з fileпротоколом з жорсткого диска локального користувача.

Якщо сторінка HTML обслуговується HTTP з сервера, ви не можете отримати доступ до будь-яких локальних файлів, вказавши їх в srcатрибуті разом із file://протоколом, оскільки це означало б, що ви могли отримати доступ до будь-якого файлу на комп'ютері користувачів, не користувач знаючи, який би був величезний ризик безпеки.

Як сказав Димитър Бонев, ви можете отримати доступ до файлу, якщо користувач вибере його за допомогою селектора файлів самостійно. Без цього кроку це заборонено всіма браузерами з поважних причин. Таким чином, хоча його відповідь може виявитись корисною для багатьох людей, вона послаблює вимоги з коду у вихідному питанні.

Нещодавно натрапив на цю проблему. Веб-сайт не зміг отримати доступ до відеофайлу на локальному ПК через налаштування безпеки (зрозуміло насправді) ТІЛЬКИ як я міг обійти його, це запустити веб-сервер на локальному ПК (server2Go), і всі посилання на відеофайл з Інтернету були на 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-->

Не ідеальне рішення, але працювало для мене.