HTML5 ビデオ/オーディオのローカル ファイル再生例の紹介_html5 チュートリアル スキル

この期間中、開発者が同じ質問を繰り返しているのをよく見かけます。なぜ src 属性を設定してもローカル メディア ファイルを再生できないのですか?たとえば、video.src="D:test.mp4" です。

これは、ブラウザーの JavaScript が、ユーザーからの事前の許可なしにローカル リソース (ファイル システム、カメラ、マイクなど) に直接アクセスできないためです。ブラウザーにもこの制限を課す必要があります。想像してみてください。JavaScript がローカル ファイル システムに不正にアクセスできる場合、ユーザーがインターネット上の Web ページにアクセスするときに、ユーザーの個人データが簡単に盗まれてしまいます。コンピュータに保存されているクレジット カード番号、パスワード、企業機密ファイルなどのプライベート ファイルが、知らないうちに悪意のある JavaScript プログラムによってリモート サーバーにアップロードされている可能性があり、これはユーザーにとって耐えられません。

ユーザーの許可を得た後でもローカルファイルを再生できます。方法は次のとおりです。

ページに入力ノードを挿入し、タイプをファイルとして指定します。複数のファイルを再生する必要がある場合は、属性 multiple を追加できます。ファイルノードが更新されたときにコールバック関数を登録します。コールバック関数では、URL.createObjectURL 関数を呼び出して、選択したファイルの URL を取得し、その URL をオーディオまたはビデオの src 値に設定します。

コード例は次のとおりです:

コードをコピーします

コードは次のとおりです:

audio_id" コントロールの自動再生ループ>お使いのブラウザは HTML5 オーディオ
<script> <br />function onInputFileChange() { <br /> var file = document.getElementById('file').files[ 0]; <br /> var url = URL.createObjectURL(file); <br /> document.getElementById("audio_id").src = url; ;/script> <br /> <br /><br /><br /><br />このコードは Chrome 30 と Firefox 24 でテストされています。IE では互換性の問題が発生するはずです (私の知る限り、IE8 以前のバージョンは間違いなく動作しません)。IE は HTML5 を十分にサポートしておらず、IE10 が関連する API を実装しているかどうかもわかりません。 <br /></script>