要使用HTML5有效地流媒體，請使用MP4和WebM等兼容格式進(jìn)行視頻，以及MP3或OGG進(jìn)行音頻。 1）在使用Handbrake或Audacity等工具上傳之前，在上傳之前，以平衡質(zhì)量和尺寸。 2）明智地使用預(yù)加載前屬性 - 自動媒體，元數(shù)據(jù)否則。 3）僅使用靜音音頻啟用自動播放以避免中斷。 4）確保對CSS的響應(yīng)能力，并為不支持的瀏覽器提供后備內(nèi)容。遵循這些步驟可確保更快的負(fù)載時(shí)間，更平滑的播放和減少帶寬的用法。

使用HTML5視頻和音頻有效地流媒體不僅僅是將<video></video>或<audio></audio>標(biāo)簽映入您的頁面。這是要確保文件加載快，播放平穩(wěn)，并且不要不必要地吃帶寬。

這里有幾種實(shí)用方法可以使這種情況發(fā)生，而不會使事情過度復(fù)雜化。

使用正確的文件格式

并非所有瀏覽器都支持相同的媒體格式，因此選擇兼容的媒體格式是關(guān)鍵。對于視頻，使用MP4（H.264） - 它幾乎到處都可以使用。如果您想要更廣泛的支持，尤其是在Firefox或Safari中，請考慮提供WebM 。

對于音頻， MP3得到了廣泛的支持，但是OGG和AAC可以更好地適用于較低的比特率的質(zhì)量。您可以在這樣<audio></audio> <video></video>中提供多個(gè)來源：

 <視頻控制>
  <source src =“ movie.mp4” type =“ video/mp4”>
  <source src =“ movie.webm” type =“ video/webm”>
  您的瀏覽器不支持視頻標(biāo)簽。
</video>

這樣，瀏覽器可以選擇它可以最佳處理的格式。

上傳之前優(yōu)化媒體文件

大文件=慢加載=不愉快的用戶。

在上傳之前，使用Handbrake等工具進(jìn)行視頻或Audacity for Audio進(jìn)行壓縮視頻和音頻。旨在在質(zhì)量和文件大小之間保持平衡。

• 對于視頻：1080p的5–8 Mbps通常很好。
• 對于音頻：對于大多數(shù)Web用途，128 kbps aac或mp3足夠了。

另外，請使用漸進(jìn)下載編碼，以便在完全下載文件之前開始播放該文件。

巧妙地添加預(yù)緊力和自動播放屬性

preload屬性告訴瀏覽器頁面加載時(shí)要加載多少媒體。選項(xiàng)是：

• preload="auto" - 瀏覽器提早加載整個(gè)文件
• preload="metadata" - 僅加載基本信息（如持續(xù)時(shí)間）
• preload="none" - 等到用戶點(diǎn)擊播放

如果您的媒體很關(guān)鍵（就像英雄橫幅一樣）， auto是有道理的。但是，如果在頁面上更遠(yuǎn)， metadata可以節(jié)省帶寬。

除非您確定用戶期望聲音，否則自動播放效果最好。否則，它可能會令人震驚，甚至被一些瀏覽器所阻擋。

提供響應(yīng)式控制和后備

確保您的媒體在不同的設(shè)備上進(jìn)行良好的尺度。一個(gè)簡單的CSS規(guī)則，例如width: 100%; height: auto;防止視頻打破布局。

另外，如果瀏覽器不支持它們，請務(wù)必在<video></video>或<audio></audio>標(biāo)簽中包含后備內(nèi)容 - 就像下載文件或消息告訴用戶該怎么做的鏈接一樣。

而且，如果您要嵌入外部托管的媒體（例如來自YouTube或SoundCloud），請堅(jiān)持其官方的嵌入式代碼。他們已經(jīng)為您處理流媒體優(yōu)化。

基本上就是這樣。使用HTML5有效地流媒體不是Rocket Science，但是跳過這些步驟都會導(dǎo)致頁面較慢和沮喪的用戶。做一些準(zhǔn)備工作，明智地選擇您的格式，然后讓瀏覽器完成其余的工作。

以上是使用HTML5視頻和音頻有效地流媒體。的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！