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

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

這裡有幾種實(shí)用方法可以使這種情況發(fā)生，而不會(huì)使事情過(guò)度複雜化。

使用正確的文件格式

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

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

 <視頻控制>
  <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ì)量和文件大小之間保持平衡。

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

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

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

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

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

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

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

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

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

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

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

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

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