ホームページ > 記事 > ウェブフロントエンド > HTML5 ビデオ/オーディオはローカル ファイルを再生します
HTML5 ビデオ/オーディオはローカル ファイルを再生します
- 不言オリジナル
- 2018-06-05 10:55:127623ブラウズ
この記事は主に HTML5 ビデオ/オーディオのローカル ファイルの再生について紹介しています。必要な友達はそれを参照できます。
ユーザーの許可を得た後でもローカル ファイルを再生できます。ページに入力ノードを入力し、タイプをファイルとして指定し、URL をオーディオまたはビデオの src 値に設定します。この間、開発者が同じ質問を繰り返しているのをよく見かけます。なぜ設定で実行できないのですか。 src 属性はローカルメディアファイルを再生しますか?たとえば、video.src="D:test.mp4" です。
これは、ブラウザーの JavaScript がユーザーからの事前の許可なしにローカル リソース (ファイル システム、カメラ、マイクなど) に直接アクセスできないためです。ブラウザーにもこの制限を課す必要があります。想像してみてください。JavaScript がローカル ファイル システムに不正にアクセスできる場合、ユーザーがインターネット上の Web ページにアクセスするときに、ユーザーの個人データが簡単に盗まれてしまいます。コンピュータに保存されているクレジット カード番号、パスワード、企業機密ファイルなどのプライベート ファイルが、知らないうちに悪意のある JavaScript プログラムによってリモート サーバーにアップロードされている可能性があり、これはユーザーにとって耐えられません。
ユーザーの許可を得た後でもローカルファイルを再生できます。その方法は次のとおりです。
入力ノードをページに挿入し、タイプをファイルとして指定します。複数のファイルを再生する必要がある場合は、属性 multiple を追加できます。ファイルノードが更新されたときにコールバック関数を登録します。コールバック関数では、URL.createObjectURL 関数を呼び出して、選択したファイルの URL を取得し、その URL をオーディオまたはビデオの src 値に設定します。
コード例は次のとおりです:
コードをコピーします コードは次のとおりです:
<html>
<body>
<input type="file" id="file" onchange="onInputFileChange()">
<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("audio_id").src = url;
}
</script>
</body>
</html>コードは Chrome 30 と Firefox 24 でテストに合格しましたが、Firefox 24 では特定の互換性の問題があるはずです。 IE (私が知る限り、IE8 およびそれ以前のバージョンは間違いなく動作しません) は、IE が HTML5 を十分にサポートしていないため、IE10 が関連する API を実装しているかどうかはわかりません。
関連する推奨事項:
HTML での e8e496c15ba93d81f6ea4fe5f55a2244 タグの使用の詳細な説明以上がHTML5 ビデオ/オーディオはローカル ファイルを再生しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。