网页直播技术

技术和行业标准不断发展。因此，直播技术也是如此。HLS流式传输等新标准和功能改善了观看者体验。随着技术的不断进步和实时流媒体视频流的日益流行，使用它们的组织保持竞争力至关重要。

现在，HTML5视频已取代AdobeFlash成为黄金标准，新的流媒体协议也已开发出来。这包括HTTP直播流(HLS)。HLS直播工具等新技术为直播提供了增强的视频质量，在流媒体内容时提供更好的视觉和音频媒体。总体而言，今天的视频播放更加宏伟。

我们涵盖了您需要了解的有关正确嵌入HLS流的所有信息。我们首先回顾嵌入式视频播放技术的基础知识。然后，我们深入研究HLS流协议和相关技术以及如何嵌入HLS流。最后，我们提供有关如何连接HLS和M3U8技术的专家见解。

目录

· 视频播放器嵌入：您需要了解的内容

· 什么是HTML5视频播放器？

· 什么是HLS？

· HLS流媒体和RTMP摄取：最佳流媒体设置

· 如何嵌入HLS流

· 如何在一页上嵌入多个视频播放器

· 免费视频托管与付费视频托管

· HLS与M3U8的连接

· HLS替代方案：MPEG-DASH

视频播放器嵌入：您需要了解的内容

视频播放器是一种面向用户的媒体分发软件程序，允许观众访问数字视频和音频数据内容。嵌入 视频播放器 是将软件添加到面向用户的页面，无论是在软件app、网站还是电子邮件上。嵌入需要更改电子邮件或网页的代码以合并视频播放器的代码。

简而言之，当您在计算机上观看YouTube上的视频时，观看内容的屏幕矩形部分就是视频播放器。视频播放器周围较大的浏览器空间是嵌入播放器的网页。

如果您缺乏技术背景，学习如何在网页上嵌入视频播放器可能看起来很复杂。但视频托管平台可以让这一切变得快速而简单。

第三方视频托管系统将存储视频文件、传送内容并帮助您自定义播放器，以便您可以将其嵌入您的网站并立即开始广播。

为什么要嵌入视频播放器？

许多专业广播公司选择在其网站上嵌入视频播放器，而不是将观众发送到YouTube等网站。原因有很多，包括对品牌和美学的更好控制。

借助 白标流媒体解决方案，您可以将第三方徽标替换为您自己的徽标。您还可以消除其他分散注意力的元素，例如其他创作者和广播公司的“推荐视频”。这可以让您提升您的视频，同时赋予它们更专业的外观。

当您学习如何嵌入视频播放器时，您可以管理页面和视频播放器以反映您的品牌并推动预期的转化。这可以包括添加徽标或其他设计元素来反映您的品牌。像配色方案或字体选择这样简单的事情可以对品牌塑造大有帮助。

第三方视频嵌入解决方案也往往配备自己的品牌、营销和分析工具。这可能会非常限制您的营销目标，有时甚至适得其反。

白标或其他无品牌嵌入式播放器为您提供最大的自由度，以最有利于您和您的企业的方式收集和解释您的营销数据。

什么是HTML5视频播放器？

HTML5 视频播放器 是在线视频流中最流行的视频播放器。它以其广泛的兼容性而闻名。HTML5视频播放器是在线流媒体中支持最广泛的选项。

正如我们提到的，Flash播放器已经死了。尽管它在很长一段时间内发挥着重要作用，但该视频播放器与移动媒体流不兼容。iPhone和其他智能手机的快速普及催生了对与这些设备兼容的视频播放器的需求。HTML5视频播放器就是  为了满足这一需求而创建的。

HTML5视频播放器对广播公司极具吸引力，因为它们的通用兼容性使他们能够覆盖尽可能多的受众。不用担心会漏掉使用特定设备并想要访问HTML5视频内容的观看者

HTML5视频播放器易于  自定义并 嵌入到网站 和软件app中。这对于想要为其视频内容打造品牌的公司来说非常有价值。

尽管HTML5在过去十年中越来越受欢迎，但当Chrome和其他网络浏览器永久取消Flash播放器时，它正式成为唯一广泛支持的视频播放器。

HTML5视频播放器与所有主要浏览器兼容，包括InternetExplorer、Firefox、Safari和Chrome。它们还适用于移动设备，包括iPhone、iPad、Android手机和平板电脑。

同样，HTML5视频播放器与所有主要操作系统兼容，包括Windows、Mac和Linux。它还与所有主要视频格式兼容，包括MP4、WebM和Ogg。

什么是HLS？

HTTP  LiveStreaming(HLS)协议 由Apple于2009年开发，用于向HTML5视频播放器传送视频内容。该协议取代了用于视频传输的RTMP，后者是流式传输到Flash播放器的标准。

在客户端设备或移动设备上使用Flash的主要问题之一是移动设备容易移动。Flash被设计为在稳定的互联网连接下工作。移动设备比通过电缆连接到互联网的PC需要更大的灵活性。

HLS是一种自适应比特率流媒体协议。这意味着它可以实现 响应式视频流 ，并可以根据观看者的互联网速度自动调整视频质量。这是改变游戏规则的，因为它改善了用户体验，因为自适应HLS流旨在减少缓冲和滞后。

HLS可用于摄取和交付。然而，市场上的HLS编码器并不多 ，因此摄取尚未得到广泛采用。

HLS流媒体和RTMP摄取：最佳流媒体设置

尽管Flash已成为过去，但 实时消息传递协议 (RTMP)仍然存在并且运行良好。它在HLS流处理过程中起着非常重要的作用。 RTMP摄取 现在通常用作默认视频摄取协议，这意味着它负责将视频传输到视频托管平台或内容分发网络(CDN)。

流媒体HLS和RTMP交付的组合是目前最优化的 流媒体设置。HLS协议使广播公司能够访问适应性广泛的 HTML5编码器，而RTMP则提供对低延迟 流媒体、经济实惠的编码器等的访问。这对组合也是 最安全的 方法。

尽管 RTMP托管设置 是目前的首选方法，但没有说明这会持续多久。实时视频流服务器协议正在不断发展并且速度不断加快。

如何嵌入HLS流

在您的网站上嵌入HLS流并不是太困难。使用正确的在线视频播放器(OVP)和网站编辑器，此过程非常简单  。

在本教程中，我们假设您已经制作了视频内容并建立了一个网站

让我们看一下广播公司在其网站上嵌入HLS流必须遵循的5个步骤。

1.选择在线视频平台（OVP）

要嵌入HLS流，您需要投资支持HLS软件的在线视频平台，还需要提供可嵌入的视频播放器。

企业和其他专业组织应该投资付费解决方案，而不是依赖YouTube和DailyMotion等免费平台。我们已经讨论了一些原因，例如能够添加您的品牌并避免其他创作者的内容分散观众的注意力。

在选择在线视频平台时需要考虑的一些事项包括以下内容：

· 货币化支持： 与Dacast（支持订阅视频点播，SVOD）、基于广告的视频点播（AVOD）和交易型视频点播（TVOD）不同，某些平台没有货币化支持或仅支持一两个选项。通过内容获利的方法有很多，而且机会之窗正在不断扩大。不要让限制性平台剥夺您通过内容获得的潜在利润。

· CDN关系： 如果您想确保始终以尽可能高的质量向世界各地交付内容，请了解 CDN如何 在可靠地交付内容方面发挥重要作用。这些网络可以在不同的服务器位置缓存大部分视频内容流。这使得无论用户何时请求内容，都能够以最佳且高效的方式分发给他们。

· 视频保护功能： 如今，视频在未经适当同意的情况下被盗和传播的情况太常见了。寻找 平台上的DRM、水印、域控制、地理限制和整体安全性等功能

· 客户支持： 一些平台为较便宜的计划提供最低限度的支持，而其他平台则为所有计划提供一流的支持。讽刺的是，许多顶级品牌只提供低于标准的客户服务。这通常是因为他们的客户群已经超出了他们的客户支持资源。或者他们只是（遗憾地）承受失去一些不满意的客户的损失。

· 在线评论： 研究G2和Capterra等网站上有关不同平台的在线评论。确保您正在寻找知名公司的值得信赖的评论。不幸的是，有很多年轻的公司依靠虚假评论来推销他们的产品。警惕看似评价完美但声誉不高的新公司。

一些最受欢迎的在线视频平台包括Dacast、Kaltura、Brightcove和Livestream。查看我们对顶级 在线视频平台的比较 ，了解有关市场上一些最佳选择的更多信息。

企业或专业组织使用在线视频平台的主要原因之一是它为广播公司面临的大多数挑战提供即插即用的解决方案。

2.上传您的视频或连接来源

设置在线视频平台后，就可以上传视频内容了。每个平台的点播视频上传流程都是独一无二的。例如，在Dacast上，您可以 上传单个视频 或批量上传。

另一方面，如果您想要进行直播，则需要先创建一个直播频道，然后才能继续执行步骤3。以下是使用Dacast执行此操作的方法：

1. 在左侧菜单中，找到并单击“添加+”按钮。

2. 从菜单中选择“直播”。

3. 将会弹出一个窗口。当它出现时，添加标题并选择“标准”作为您的流类型。

4. 单击“创建”。

按照上述步骤创建直播频道以成功举办直播。您现在已准备好执行步骤3。

在此阶段，您需要设置来源。这可能需要 设置编码器 并通过那里连接源。如果您还没有编码器，我们强烈建议您下载 OBSforDacast的免费版本。设置和开始都很容易。

在此步骤中，我们再次使用Dacast作为示例，但该过程可能因平台而异。

3.选择嵌入代码

现在是时候选择嵌入代码了。多种类型的嵌入代码适用于不同的用例。

Dacast提供两种用于直播的嵌入代码选项：  JS和iframe。 只要视频文件支持，两者都可以通过桌面和移动设备 在您的网站或软件app上播放。

JS嵌入代码是Dacast的默认嵌入代码，它支持大多数功能。这包括在元素设计为不同尺寸时做出响应以及使用引用限制功能。

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

此嵌入代码不响应，这意味着它的大小是固定的。全屏功能有时也会被删除。仅当您在iframe中使用iframe时，通常才会发生这种情况。

基于URL的引荐来源网址限制功能不适用于iframe嵌入。这就是Dacast选择使用JS代码作为默认代码的原因。

4.访问您的网站代码

接下来，您需要在网站构建器上找到可以访问网站代码的位置。

一般来说，块编辑模式允许您拖放元素，而文本编辑器模式则允许您访问网站的HTML。对于此步骤，您需要找到HTML编辑器。

所以您可以看到它是多么容易，我们将使用WordPress（最流行的网站构建器之一）引导您完成此步骤。

在WordPress上访问网站代码的过程如下：

1. 打开要添加视频的页面或帖子

2. 左上角会有一个加号；点击它

3. 在元素菜单中搜索“视频”一词

4. 将视频元素拖放到页面或帖子中您想要放置视频的位置

5. 单击视频元素顶部的三个点(...)，然后单击“编辑为HTML”。

如果出于某种原因，您仍然使用旧版本的WordPress，则可能需要从“可视化编辑器”切换到“HTML编辑器”。情况不太可能是这样。

如果您使用的是WordPress以外的平台，请参阅我们有关在不同网站构建器上嵌入 视频播放器的专用指南 。它提供了有关如何在Weebly、Wix、  Google协作平台、Shopify、Squarespace、GoDaddy、Zyro和Yola上打开HTML编辑器的具体说明。

5.插入嵌入代码

还记得您在步骤3中复制的嵌入代码吗？通过文本编辑器将其粘贴到您网站的HTML中。

因此，继续我们在上一步（步骤4）中介绍的WordPress示例：单击视频元素顶部的点并单击“编辑为HTML”后，您将：

1. 粘贴您的嵌入代码

2. 预览

3. 点击“更新”

就是这么简单。

需要强调的是，将嵌入代码片段粘贴到网站代码中后，您应该预览它以确保它看起来像您想要的那样。

对预览感到满意后，单击“保存”、“发布”或“更新”以保存更改。查看实时网站上的更改，以确保一切都按照您需要的方式进行。

专业提示： 请务必在手机、平板电脑和笔记本电脑等不同设备上查看。有时，它可能在一种设备上看起来很完美，但在另一种设备上看起来很笨重。

如何在一页上嵌入多个视频播放器

在单个页面上嵌入多个视频播放器与仅嵌入一个HLS流略有不同。

这个过程比较简单，但是需要一些编码。以下是如何在单个页面上包含多个玩家的代码示例。

要使用此代码，请将其复制并粘贴 到您要添加视频播放器的网页上的HTML或代码编辑器中。然后，将“XXXXX_f_XXXXX”代码段替换为您的直播频道的ID。

免费视频托管与付费视频托管

我们已经详细讨论了为什么您应该将视频嵌入您的网站而不是使用免费平台。但您仍然可以使用YouTube等免费平台来托管您的视频并将这些视频嵌入您的网站（如果这是您唯一的选择）。

尽管如此，仍有一些缺点需要考虑。首先，品牌（例如YouTube徽标）可能会保留在视频上。此外，观看者仍然可以点击视频并被引导离开您的网站。一旦他们点击视频，我们就回到了第一步。他们现在可能会出现在YouTube等网站上，在那里他们可能会被其他创作者推荐视频。

其他缺点包括：

· 盗版：如今在免费平台上视频盗版非常容易。这是指人们在未经许可且未注明来源的情况下窃取和分发您的视频。

· 失去SEO优势：用户在您的网站上花费的 时间（称为“停留时间”）据说是SEO的一个影响因素。这意味着如果有人点击您网站上的视频，他们可以被带到YouTube并获得SEO好处（并不是他们需要它！）

· 没有客户支持： 联系YouTube的客户支持几乎是不可能的。他们大多有很多自助文档。因此，如果直播出现故障或停止工作，您将陷入故障排除的困境。

· 缺乏控制：  YouTube众所周知，如果它听到背景中播放任何流行歌曲，就会突然停止视频。即使陌生人碰巧开车时大声播放流行歌曲，您的直播也可能面临危险。还有许多关于整个频道因任意原因被关闭的故事。

HLS与M3U8的连接

M3U8是一种用于视频流的文件格式。它是M3U计算机文件格式的Unicode版本  。该文件类型的文件扩展名是“.m3u8”。

HLS基于M3U8文件格式构建，因此有时“HLS流”被称为“ M3U8流”。因此，根据定义，HLS播放器是HLSM3U8播放器。

一些流媒体平台（例如Dacast）使用 M3U8链接 流式传输到智能电视软件app。这比许多流媒体平台上的标准设置更具技术性 。但对于需要更精确的HLS/M3U8规范的内容创作者来说，Dacast提供了一系列可用的定制选项。

HLS替代方案：MPEG-DASH

MPEG-DASH（简称DASH）是利用自适应比特率流的另一种方式。或者，您可以使用DASH自适应流媒体而不是HLS在您的网站上嵌入HTML5播放器。然而，我们相信HLS是可行的方法，因为DASH有一个主要缺点需要考虑。

与HLS相比，DASH的最大缺点是设备兼容性。Apple设备仅支持HLS。换句话说，DASH无法在苹果设备上运行，例如iPhone和MacBook。考虑到苹果设备的受欢迎程度，这是一个巨大的考虑因素。

过去，DASH比HLS具有以较低比特率提供更好视频质量的优势，但两者之间已不再有太大区别。同样，与HLS相比，DASH以前支持更高分辨率的视频，但截至2017年，情况不再如此。

出于这些原因，HLS是最佳选择。

结论

HLS媒体流协议改变了直播游戏规则。与HTML5相结合，全世界的观众都可以体验流畅的媒体文件流。

只需点击几下即可将HLS流媒体嵌入到任何地方，这意味着每个广播公司都应该利用这种质量提升。其结果是改善了观众体验。因此，这可以改善组织的品牌形象，将其推向新的高度。【言鼎科技】