HTML5ビデオタグ付きのローカル（ハードドライブ）ビデオファイルを再生しますか？

Question 1

以下を実現したい。

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

その目的は、ユーザーが自分のハードドライブからファイルを選択できるようにすることです。

そして、アップロードしない理由はもちろん、送信コストとストレージクォータです。ファイルを保存する理由はありません。

出来ますか？

Question 2

ローカルビデオファイルを再生することが可能です。

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

input要素を介してファイルが選択された場合：

「変更」イベントが発生します
FileListから最初のFileオブジェクトを取得しますinput.files
作成したオブジェクトのURLをFileオブジェクトを指していること
オブジェクトのURLをvideo.srcプロパティに設定します
身を乗り出して見てください:)

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>

スニペットを展開

Question 3

これは、HTMLファイルにもfileローカルユーザーのハードディスクからプロトコルがロードされている場合にのみ可能になります。

HTMLページがサーバーからHTTPによって提供されている場合src、file://プロトコルの属性でローカルファイルを指定してアクセスすることはできません。これは、ユーザーがどちらであるかを知らなくても、ユーザーのコンピューター上の任意のファイルにアクセスできることを意味します。巨大なセキュリティリスク。

Dimitar Bonevが言ったように、ユーザーが自分でファイルセレクターを使用してファイルを選択すると、ファイルにアクセスできます。その手順がないと、正当な理由ですべてのブラウザで禁止されます。したがって、彼の答えは多くの人にとって役立つかもしれませんが、元の質問のコードから要件を緩めます。

Question 4

しばらく前にこの問題に遭遇しました。ウェブサイトはセキュリティ設定のためにローカルPC上のビデオファイルにアクセスできませんでした（本当に理解できます）それを回避する唯一の方法はローカルPC（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-->

理想的な解決策ではありませんが、私にとってはうまくいきました。