HTML5 ビデオ/オーディオはローカルファイルを再生します-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 ビデオ/オーディオはローカルファイルを再生します

不言

Jun 05, 2018 am 10:55 AM

audio html5 video

この記事は主に 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&#39;t support HTML5 Audio</audio>  
<script>  
function onInputFileChange() {  
   var file = document.getElementById(&#39;file&#39;).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 を実装しているかどうかはわかりません。