ここで、HTML5 の<video>
タグで動画を再生するには、適切な URL で動画を配信する際にも設定する必要があることを確認する必要があることを学びましたContent-Type
。
Web ページをローカル ファイル システムから実行するだけの場合、またはサーバーの応答ヘッダーを操作できない場合、どうすればこれを回避できますか?
ここで、HTML5 の<video>
タグで動画を再生するには、適切な URL で動画を配信する際にも設定する必要があることを確認する必要があることを学びましたContent-Type
。
Web ページをローカル ファイル システムから実行するだけの場合、またはサーバーの応答ヘッダーを操作できない場合、どうすればこれを回避できますか?
HTML5 FileReader API (チュートリアル)を使用することをお勧めします。これにより、ローカル ビデオが URL として提供されます。一部のサイトでは、アップロード前に画像のプレビューを表示するデモを見つけることができますが、理論上 (および実際には、以下のリンクを参照してください)、オーディオとビデオで同じものを使用することが可能です。
私は小さなデモを行いました (このためではなく、Camera API のためです)。これはあなたのニーズに合うかもしれません。
自分で見てください:http://jsbin.com/efunel/6
ビデオ デモは chromium(20.0) および firefox(16.0) (非常に長い時間がかかった後!!!) で、Webm形式のみで動作しました。
PS: 小さいビデオ (15M 以下) を選択してみてください。
編集:(@headkitが要求したコードスニペット)
fileReader = new FileReader();
fileReader.onload = function (event) {
element.attr("src",event.target.result);
};
fileReader.readAsDataURL(file);