技術(shù)和行業(yè)標(biāo)準(zhǔn)不斷發(fā)展。因此，直播技術(shù)也是如此。HLS流式傳輸?shù)刃聵?biāo)準(zhǔn)和功能改善了觀看者體驗(yàn)。隨著技術(shù)的不斷進(jìn)步和實(shí)時(shí)流媒體視頻流的日益流行，使用它們的組織保持競爭力至關(guān)重要。

現(xiàn)在，HTML5視頻已取代AdobeFlash成為黃金標(biāo)準(zhǔn)，新的流媒體協(xié)議也已開發(fā)出來。這包括HTTP直播流(HLS)。HLS直播工具等新技術(shù)為直播提供了增強(qiáng)的視頻質(zhì)量，在流媒體內(nèi)容時(shí)提供更好的視覺和音頻媒體?？傮w而言，今天的視頻播放更加宏偉。

我們涵蓋了您需要了解的有關(guān)正確嵌入HLS流的所有信息。我們首先回顧嵌入式視頻播放技術(shù)的基礎(chǔ)知識(shí)。然后，我們深入研究HLS流協(xié)議和相關(guān)技術(shù)以及如何嵌入HLS流。最后，我們提供有關(guān)如何連接HLS和M3U8技術(shù)的專家見解。

目錄

· 視頻播放器嵌入：您需要了解的內(nèi)容

· 什么是HTML5視頻播放器？

· 什么是HLS？

· HLS流媒體和RTMP攝?。鹤罴蚜髅襟w設(shè)置

· 如何嵌入HLS流

· 如何在一頁上嵌入多個(gè)視頻播放器

· 免費(fèi)視頻托管與付費(fèi)視頻托管

· HLS與M3U8的連接

· HLS替代方案：MPEG-DASH

視頻播放器嵌入：您需要了解的內(nèi)容

視頻播放器是一種面向用戶的媒體分發(fā)軟件程序，允許觀眾訪問數(shù)字視頻和音頻數(shù)據(jù)內(nèi)容。嵌入 視頻播放器 是將軟件添加到面向用戶的頁面，無論是在軟件app、網(wǎng)站還是電子郵件上。嵌入需要更改電子郵件或網(wǎng)頁的代碼以合并視頻播放器的代碼。

簡而言之，當(dāng)您在計(jì)算機(jī)上觀看YouTube上的視頻時(shí)，觀看內(nèi)容的屏幕矩形部分就是視頻播放器。視頻播放器周圍較大的瀏覽器空間是嵌入播放器的網(wǎng)頁。

如果您缺乏技術(shù)背景，學(xué)習(xí)如何在網(wǎng)頁上嵌入視頻播放器可能看起來很復(fù)雜。但視頻托管平臺(tái)可以讓這一切變得快速而簡單。

第三方視頻托管系統(tǒng)將存儲(chǔ)視頻文件、傳送內(nèi)容并幫助您自定義播放器，以便您可以將其嵌入您的網(wǎng)站并立即開始廣播。

為什么要嵌入視頻播放器？

許多專業(yè)廣播公司選擇在其網(wǎng)站上嵌入視頻播放器，而不是將觀眾發(fā)送到Y(jié)ouTube等網(wǎng)站。原因有很多，包括對(duì)品牌和美學(xué)的更好控制。

借助 白標(biāo)流媒體解決方案，您可以將第三方徽標(biāo)替換為您自己的徽標(biāo)。您還可以消除其他分散注意力的元素，例如其他創(chuàng)作者和廣播公司的“推薦視頻”。這可以讓您提升您的視頻，同時(shí)賦予它們更專業(yè)的外觀。

當(dāng)您學(xué)習(xí)如何嵌入視頻播放器時(shí)，您可以管理頁面和視頻播放器以反映您的品牌并推動(dòng)預(yù)期的轉(zhuǎn)化。這可以包括添加徽標(biāo)或其他設(shè)計(jì)元素來反映您的品牌。像配色方案或字體選擇這樣簡單的事情可以對(duì)品牌塑造大有幫助。

第三方視頻嵌入解決方案也往往配備自己的品牌、營銷和分析工具。這可能會(huì)非常限制您的營銷目標(biāo)，有時(shí)甚至適得其反。

白標(biāo)或其他無品牌嵌入式播放器為您提供最大的自由度，以最有利于您和您的企業(yè)的方式收集和解釋您的營銷數(shù)據(jù)。

什么是HTML5視頻播放器？

HTML5 視頻播放器 是在線視頻流中最流行的視頻播放器。它以其廣泛的兼容性而聞名。HTML5視頻播放器是在線流媒體中支持最廣泛的選項(xiàng)。

正如我們提到的，F(xiàn)lash播放器已經(jīng)死了。盡管它在很長一段時(shí)間內(nèi)發(fā)揮著重要作用，但該視頻播放器與移動(dòng)媒體流不兼容。iPhone和其他智能手機(jī)的快速普及催生了對(duì)與這些設(shè)備兼容的視頻播放器的需求。HTML5視頻播放器就是  為了滿足這一需求而創(chuàng)建的。

HTML5視頻播放器對(duì)廣播公司極具吸引力，因?yàn)樗鼈兊耐ㄓ眉嫒菪允顾麄兡軌蚋采w盡可能多的受眾。不用擔(dān)心會(huì)漏掉使用特定設(shè)備并想要訪問HTML5視頻內(nèi)容的觀看者

HTML5視頻播放器易于  自定義并 嵌入到網(wǎng)站 和軟件app中。這對(duì)于想要為其視頻內(nèi)容打造品牌的公司來說非常有價(jià)值。

盡管HTML5在過去十年中越來越受歡迎，但當(dāng)Chrome和其他網(wǎng)絡(luò)瀏覽器永久取消Flash播放器時(shí)，它正式成為唯一廣泛支持的視頻播放器。

HTML5視頻播放器與所有主要瀏覽器兼容，包括InternetExplorer、Firefox、Safari和Chrome。它們還適用于移動(dòng)設(shè)備，包括iPhone、iPad、Android手機(jī)和平板電腦。

同樣，HTML5視頻播放器與所有主要操作系統(tǒng)兼容，包括Windows、Mac和Linux。它還與所有主要視頻格式兼容，包括MP4、WebM和Ogg。

什么是HLS？

HTTP  LiveStreaming(HLS)協(xié)議 由Apple于2009年開發(fā)，用于向HTML5視頻播放器傳送視頻內(nèi)容。該協(xié)議取代了用于視頻傳輸?shù)腞TMP，后者是流式傳輸?shù)紽lash播放器的標(biāo)準(zhǔn)。

在客戶端設(shè)備或移動(dòng)設(shè)備上使用Flash的主要問題之一是移動(dòng)設(shè)備容易移動(dòng)。Flash被設(shè)計(jì)為在穩(wěn)定的互聯(lián)網(wǎng)連接下工作。移動(dòng)設(shè)備比通過電纜連接到互聯(lián)網(wǎng)的PC需要更大的靈活性。

HLS是一種自適應(yīng)比特率流媒體協(xié)議。這意味著它可以實(shí)現(xiàn) 響應(yīng)式視頻流 ，并可以根據(jù)觀看者的互聯(lián)網(wǎng)速度自動(dòng)調(diào)整視頻質(zhì)量。這是改變游戲規(guī)則的，因?yàn)樗纳屏擞脩趔w驗(yàn)，因?yàn)樽赃m應(yīng)HLS流旨在減少緩沖和滯后。

HLS可用于攝取和交付。然而，市場上的HLS編碼器并不多 ，因此攝取尚未得到廣泛采用。

HLS流媒體和RTMP攝?。鹤罴蚜髅襟w設(shè)置

盡管Flash已成為過去，但 實(shí)時(shí)消息傳遞協(xié)議?(RTMP)仍然存在并且運(yùn)行良好。它在HLS流處理過程中起著非常重要的作用。 RTMP攝取 現(xiàn)在通常用作默認(rèn)視頻攝取協(xié)議，這意味著它負(fù)責(zé)將視頻傳輸?shù)揭曨l托管平臺(tái)或內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)。

流媒體HLS和RTMP交付的組合是目前最優(yōu)化的 流媒體設(shè)置。HLS協(xié)議使廣播公司能夠訪問適應(yīng)性廣泛的 HTML5編碼器，而RTMP則提供對(duì)低延遲?流媒體、經(jīng)濟(jì)實(shí)惠的編碼器等的訪問。這對(duì)組合也是 最安全的 方法。

盡管 RTMP托管設(shè)置 是目前的首選方法，但沒有說明這會(huì)持續(xù)多久。實(shí)時(shí)視頻流服務(wù)器協(xié)議正在不斷發(fā)展并且速度不斷加快。

如何嵌入HLS流

在您的網(wǎng)站上嵌入HLS流并不是太困難。使用正確的在線視頻播放器(OVP)和網(wǎng)站編輯器，此過程非常簡單  。

在本教程中，我們假設(shè)您已經(jīng)制作了視頻內(nèi)容并建立了一個(gè)網(wǎng)站

讓我們看一下廣播公司在其網(wǎng)站上嵌入HLS流必須遵循的5個(gè)步驟。

1.選擇在線視頻平臺(tái)（OVP）

要嵌入HLS流，您需要投資支持HLS軟件的在線視頻平臺(tái)，還需要提供可嵌入的視頻播放器。

企業(yè)和其他專業(yè)組織應(yīng)該投資付費(fèi)解決方案，而不是依賴YouTube和DailyMotion等免費(fèi)平臺(tái)。我們已經(jīng)討論了一些原因，例如能夠添加您的品牌并避免其他創(chuàng)作者的內(nèi)容分散觀眾的注意力。

在選擇在線視頻平臺(tái)時(shí)需要考慮的一些事項(xiàng)包括以下內(nèi)容：

· 貨幣化支持： 與Dacast（支持訂閱視頻點(diǎn)播，SVOD）、基于廣告的視頻點(diǎn)播（AVOD）和交易型視頻點(diǎn)播（TVOD）不同，某些平臺(tái)沒有貨幣化支持或僅支持一兩個(gè)選項(xiàng)。通過內(nèi)容獲利的方法有很多，而且機(jī)會(huì)之窗正在不斷擴(kuò)大。不要讓限制性平臺(tái)剝奪您通過內(nèi)容獲得的潛在利潤。

· CDN關(guān)系： 如果您想確保始終以盡可能高的質(zhì)量向世界各地交付內(nèi)容，請(qǐng)了解 CDN如何 在可靠地交付內(nèi)容方面發(fā)揮重要作用。這些網(wǎng)絡(luò)可以在不同的服務(wù)器位置緩存大部分視頻內(nèi)容流。這使得無論用戶何時(shí)請(qǐng)求內(nèi)容，都能夠以最佳且高效的方式分發(fā)給他們。

· 視頻保護(hù)功能： 如今，視頻在未經(jīng)適當(dāng)同意的情況下被盜和傳播的情況太常見了。尋找 平臺(tái)上的DRM、水印、域控制、地理限制和整體安全性等功能

· 客戶支持： 一些平臺(tái)為較便宜的計(jì)劃提供最低限度的支持，而其他平臺(tái)則為所有計(jì)劃提供一流的支持。諷刺的是，許多頂級(jí)品牌只提供低于標(biāo)準(zhǔn)的客戶服務(wù)。這通常是因?yàn)樗麄兊目蛻羧阂呀?jīng)超出了他們的客戶支持資源?；蛘咚麄冎皇牵ㄟz憾地）承受失去一些不滿意的客戶的損失。

· 在線評(píng)論： 研究G2和Capterra等網(wǎng)站上有關(guān)不同平臺(tái)的在線評(píng)論。確保您正在尋找知名公司的值得信賴的評(píng)論。不幸的是，有很多年輕的公司依靠虛假評(píng)論來推銷他們的產(chǎn)品。警惕看似評(píng)價(jià)完美但聲譽(yù)不高的新公司。

一些最受歡迎的在線視頻平臺(tái)包括Dacast、Kaltura、Brightcove和Livestream。查看我們對(duì)頂級(jí) 在線視頻平臺(tái)的比較 ，了解有關(guān)市場上一些最佳選擇的更多信息。

企業(yè)或?qū)I(yè)組織使用在線視頻平臺(tái)的主要原因之一是它為廣播公司面臨的大多數(shù)挑戰(zhàn)提供即插即用的解決方案。

2.上傳您的視頻或連接來源

設(shè)置在線視頻平臺(tái)后，就可以上傳視頻內(nèi)容了。每個(gè)平臺(tái)的點(diǎn)播視頻上傳流程都是獨(dú)一無二的。例如，在Dacast上，您可以 上傳單個(gè)視頻 或批量上傳。

另一方面，如果您想要進(jìn)行直播，則需要先創(chuàng)建一個(gè)直播頻道，然后才能繼續(xù)執(zhí)行步驟3。以下是使用Dacast執(zhí)行此操作的方法：

1. 在左側(cè)菜單中，找到并單擊“添加+”按鈕。

2. 從菜單中選擇“直播”。

3. 將會(huì)彈出一個(gè)窗口。當(dāng)它出現(xiàn)時(shí)，添加標(biāo)題并選擇“標(biāo)準(zhǔn)”作為您的流類型。

4. 單擊“創(chuàng)建”。

按照上述步驟創(chuàng)建直播頻道以成功舉辦直播。您現(xiàn)在已準(zhǔn)備好執(zhí)行步驟3。

在此階段，您需要設(shè)置來源。這可能需要 設(shè)置編碼器 并通過那里連接源。如果您還沒有編碼器，我們強(qiáng)烈建議您下載 OBSforDacast的免費(fèi)版本。設(shè)置和開始都很容易。

在此步驟中，我們再次使用Dacast作為示例，但該過程可能因平臺(tái)而異。

3.選擇嵌入代碼

現(xiàn)在是時(shí)候選擇嵌入代碼了。多種類型的嵌入代碼適用于不同的用例。

Dacast提供兩種用于直播的嵌入代碼選項(xiàng)：  JS和iframe。 只要視頻文件支持，兩者都可以通過桌面和移動(dòng)設(shè)備?在您的網(wǎng)站或軟件app上播放。

JS嵌入代碼是Dacast的默認(rèn)嵌入代碼，它支持大多數(shù)功能。這包括在元素設(shè)計(jì)為不同尺寸時(shí)做出響應(yīng)以及使用引用限制功能。

iFrame是最普遍兼容的嵌入代碼。需要注意的是，某些功能不適用于它。

此嵌入代碼不響應(yīng)，這意味著它的大小是固定的。全屏功能有時(shí)也會(huì)被刪除。僅當(dāng)您在iframe中使用iframe時(shí)，通常才會(huì)發(fā)生這種情況。

基于URL的引薦來源網(wǎng)址限制功能不適用于iframe嵌入。這就是Dacast選擇使用JS代碼作為默認(rèn)代碼的原因。

4.訪問您的網(wǎng)站代碼

接下來，您需要在網(wǎng)站構(gòu)建器上找到可以訪問網(wǎng)站代碼的位置。

一般來說，塊編輯模式允許您拖放元素，而文本編輯器模式則允許您訪問網(wǎng)站的HTML。對(duì)于此步驟，您需要找到HTML編輯器。

所以您可以看到它是多么容易，我們將使用WordPress（最流行的網(wǎng)站構(gòu)建器之一）引導(dǎo)您完成此步驟。

在WordPress上訪問網(wǎng)站代碼的過程如下：

1. 打開要添加視頻的頁面或帖子

2. 左上角會(huì)有一個(gè)加號(hào)；點(diǎn)擊它

3. 在元素菜單中搜索“視頻”一詞

4. 將視頻元素拖放到頁面或帖子中您想要放置視頻的位置

5. 單擊視頻元素頂部的三個(gè)點(diǎn)(...)，然后單擊“編輯為HTML”。

如果出于某種原因，您仍然使用舊版本的WordPress，則可能需要從“可視化編輯器”切換到“HTML編輯器”。情況不太可能是這樣。

如果您使用的是WordPress以外的平臺(tái)，請(qǐng)參閱我們有關(guān)在不同網(wǎng)站構(gòu)建器上嵌入?視頻播放器的專用指南 。它提供了有關(guān)如何在Weebly、Wix、  Google協(xié)作平臺(tái)、Shopify、Squarespace、GoDaddy、Zyro和Yola上打開HTML編輯器的具體說明。

5.插入嵌入代碼

還記得您在步驟3中復(fù)制的嵌入代碼嗎？通過文本編輯器將其粘貼到您網(wǎng)站的HTML中。

因此，繼續(xù)我們在上一步（步驟4）中介紹的WordPress示例：單擊視頻元素頂部的點(diǎn)并單擊“編輯為HTML”后，您將：

1. 粘貼您的嵌入代碼

2. 預(yù)覽

3. 點(diǎn)擊“更新”

就是這么簡單。

需要強(qiáng)調(diào)的是，將嵌入代碼片段粘貼到網(wǎng)站代碼中后，您應(yīng)該預(yù)覽它以確保它看起來像您想要的那樣。

對(duì)預(yù)覽感到滿意后，單擊“保存”、“發(fā)布”或“更新”以保存更改。查看實(shí)時(shí)網(wǎng)站上的更改，以確保一切都按照您需要的方式進(jìn)行。

專業(yè)提示： 請(qǐng)務(wù)必在手機(jī)、平板電腦和筆記本電腦等不同設(shè)備上查看。有時(shí)，它可能在一種設(shè)備上看起來很完美，但在另一種設(shè)備上看起來很笨重。

如何在一頁上嵌入多個(gè)視頻播放器

在單個(gè)頁面上嵌入多個(gè)視頻播放器與僅嵌入一個(gè)HLS流略有不同。

這個(gè)過程比較簡單，但是需要一些編碼。以下是如何在單個(gè)頁面上包含多個(gè)玩家的代碼示例。

要使用此代碼，請(qǐng)將其復(fù)制并粘貼 到您要添加視頻播放器的網(wǎng)頁上的HTML或代碼編輯器中。然后，將“XXXXX_f_XXXXX”代碼段替換為您的直播頻道的ID。

免費(fèi)視頻托管與付費(fèi)視頻托管

我們已經(jīng)詳細(xì)討論了為什么您應(yīng)該將視頻嵌入您的網(wǎng)站而不是使用免費(fèi)平臺(tái)。但您仍然可以使用YouTube等免費(fèi)平臺(tái)來托管您的視頻并將這些視頻嵌入您的網(wǎng)站（如果這是您唯一的選擇）。

盡管如此，仍有一些缺點(diǎn)需要考慮。首先，品牌（例如YouTube徽標(biāo)）可能會(huì)保留在視頻上。此外，觀看者仍然可以點(diǎn)擊視頻并被引導(dǎo)離開您的網(wǎng)站。一旦他們點(diǎn)擊視頻，我們就回到了第一步。他們現(xiàn)在可能會(huì)出現(xiàn)在YouTube等網(wǎng)站上，在那里他們可能會(huì)被其他創(chuàng)作者推薦視頻。

其他缺點(diǎn)包括：

· 盜版：如今在免費(fèi)平臺(tái)上視頻盜版非常容易。這是指人們在未經(jīng)許可且未注明來源的情況下竊取和分發(fā)您的視頻。

· 失去SEO優(yōu)勢：用戶在您的網(wǎng)站上花費(fèi)的 時(shí)間（稱為“停留時(shí)間”）據(jù)說是SEO的一個(gè)影響因素。這意味著如果有人點(diǎn)擊您網(wǎng)站上的視頻，他們可以被帶到Y(jié)ouTube并獲得SEO好處（并不是他們需要它！）

· 沒有客戶支持： 聯(lián)系YouTube的客戶支持幾乎是不可能的。他們大多有很多自助文檔。因此，如果直播出現(xiàn)故障或停止工作，您將陷入故障排除的困境。

· 缺乏控制：  YouTube眾所周知，如果它聽到背景中播放任何流行歌曲，就會(huì)突然停止視頻。即使陌生人碰巧開車時(shí)大聲播放流行歌曲，您的直播也可能面臨危險(xiǎn)。還有許多關(guān)于整個(gè)頻道因任意原因被關(guān)閉的故事。

HLS與M3U8的連接

M3U8是一種用于視頻流的文件格式。它是M3U計(jì)算機(jī)文件格式的Unicode版本  。該文件類型的文件擴(kuò)展名是“.m3u8”。

HLS基于M3U8文件格式構(gòu)建，因此有時(shí)“HLS流”被稱為“ M3U8流”。因此，根據(jù)定義，HLS播放器是HLSM3U8播放器。

一些流媒體平臺(tái)（例如Dacast）使用 M3U8鏈接 流式傳輸?shù)街悄茈娨曑浖pp。這比許多流媒體平臺(tái)上的標(biāo)準(zhǔn)設(shè)置更具技術(shù)性 。但對(duì)于需要更精確的HLS/M3U8規(guī)范的內(nèi)容創(chuàng)作者來說，Dacast提供了一系列可用的定制選項(xiàng)。

HLS替代方案：MPEG-DASH

MPEG-DASH（簡稱DASH）是利用自適應(yīng)比特率流的另一種方式?；蛘撸梢允褂肈ASH自適應(yīng)流媒體而不是HLS在您的網(wǎng)站上嵌入HTML5播放器。然而，我們相信HLS是可行的方法，因?yàn)镈ASH有一個(gè)主要缺點(diǎn)需要考慮。

與HLS相比，DASH的最大缺點(diǎn)是設(shè)備兼容性。Apple設(shè)備僅支持HLS。換句話說，DASH無法在蘋果設(shè)備上運(yùn)行，例如iPhone和MacBook。考慮到蘋果設(shè)備的受歡迎程度，這是一個(gè)巨大的考慮因素。

過去，DASH比HLS具有以較低比特率提供更好視頻質(zhì)量的優(yōu)勢，但兩者之間已不再有太大區(qū)別。同樣，與HLS相比，DASH以前支持更高分辨率的視頻，但截至2017年，情況不再如此。

出于這些原因，HLS是最佳選擇。

結(jié)論

HLS媒體流協(xié)議改變了直播游戲規(guī)則。與HTML5相結(jié)合，全世界的觀眾都可以體驗(yàn)流暢的媒體文件流。

只需點(diǎn)擊幾下即可將HLS流媒體嵌入到任何地方，這意味著每個(gè)廣播公司都應(yīng)該利用這種質(zhì)量提升。其結(jié)果是改善了觀眾體驗(yàn)。因此，這可以改善組織的品牌形象，將其推向新的高度。【言鼎科技】