web-dev-qa-db-ja.com

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

以下を達成したい。

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

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

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

出来ますか？

html5videohtml5-videooffline
78
chris

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

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

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

  1. 「変更」イベントが発生します
  2. 最初の File オブジェクトをinput.filesから取得します FileList
  3. Fileオブジェクトを指す オブジェクトURL を作成します
  4. オブジェクトのURLをvideo.srcプロパティに設定します

  5. リーンバックして見る:)

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

215
Dimitar Bonev

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

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

Dimitar Bonevが言ったように、あなたがcanユーザーが自分でファイルセレクターを使用して選択した場合、ファイルにアクセスします。そのステップがなければ、正当な理由ですべてのブラウザで禁止されています。したがって、彼の答えは多くの人々にとって有用であることがわかるかもしれませんが、元の質問のコードから要件を緩めます。

7
Holger Just

しばらく前にこの問題に遭遇しました。セキュリティ設定のため、WebサイトはローカルPCのビデオファイルにアクセスできませんでした（本当に理解できる）唯一の方法は、ローカルPC（server2Go）でWebサーバーを実行することで、Webからのビデオファイルへのすべての参照は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-->

理想的なソリューションではありませんが、私にとってはうまくいきました。

7
jcoshea