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

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

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

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

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

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

コードをコピーします

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

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

人気のチュートリアル

詳細>