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

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

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

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

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

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

コードをコピーします

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

audio_id" コントロールの自動再生ループ>お使いのブラウザは HTML5 オーディオ