H5 でビデオタグとオーディオタグとプログレスバーを使用する方法

今回はH5でのvideoとaudioタグとプログレスバーの使い方を紹介します。 以下はH5でビデオタグとオーディオタグとプログレスバーを使用する際の注意事項とは何ですか？起きて見てください。

最近のプロジェクトでは、Html5 の video タグと audio タグを使用してオンラインでビデオとオーディオ ファイルを再生していましたが、ページ上で再生した後にプログレス バーが無効になるという奇妙な問題が発生しました。

w3c を確認したところ、そのことがわかりました。 HTML コードは変わらないと思いますが、静的 HTML を使用し、ビデオ タグを使用してローカル ファイルのプログレス バーを再生すると、機能するでしょうか。

それを試してみたところ、実際に機能することがわかりました。次に、F12 を使用して、プロジェクト内のローカルビデオの再生とネットワーク応答の再生の違いを確認しました。応答ヘッダーにいくつかの追加事項があることがわかりました。バックグラウンド コードに 1 つずつ追加し、最終的に成功しました。

response.setHeader("Cache-Control","max-age=31536000, must-revalidate");  
response.setHeader("Content-Length", file.length() + "");  
if (fileName.contains(".mp4")) {  
   response.setContentType("video/mpeg4");  
}  
if (fileName.contains(".mp3")) {  
   response.setContentType("audio/mpeg");  
   response.setHeader("Accept-Ranges:", "bytes");  
}

これらの事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5 を使用してカメラを呼び出す方法

H5 で postMessage を使用して 2 つの Web ページ間でデータを転送する方法

match() と search() 関数正規表現 と match() および search() 関数の具体的な違いは何ですか?

以上がH5 でビデオタグとオーディオタグとプログレスバーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。