通过示例从HTML页面内部流媒体

因此，我是一名软件工程师，试图了解有关流媒体工作原理的一些细节。我花了大部分时间试图了解与我的应用程序相关的各种编解码器，容器格式和流协议。到目前为止，这是我对它如何工作的理解，这很可能会被误导：

• 流媒体实际上可以归结为容器格式和流协议：
  • 所有音频数据（通过音频编解码器）编码为音频比特流
  • 所有视频数据都被编码（再次通过编解码器）为视频比特流
  • 这两个流合并（多路复用？）到一个容器中，该容器最终成为文件（例如MP4等）。
  • 然后，特殊的媒体服务器通过一些标准的流协议（例如RTSP）将此容器（MP4文件或其他格式）提供给客户端（也许在某人的浏览器中运行的HTML5视频播放器）
    • 对于浏览器客户端，我假设浏览器本身具有RTSP客户端，然后以某种方式将其呈现给用户HTML5 Video Player
• 我可以从Web服务器（例如nginx或httpd）托管MP4文件，但是由于这些服务器不是RTSP服务器，因此只能将对MP4的请求视为下载请求，因此无法流式传输MP4 文件。媒体文件
  • 同样，如果我要用来curl从Nginx服务器获取文件，由于Nginx curl都不讲RTSP，因此它将被视为文件下载。
• 但是，当我从流媒体服务器（VideoLAN，Red5，Wowza等）托管MP4文件时，我使用RTSP客户端（或任何受支持的流媒体客户端）从该服务器请求流，然后只能那么是否发生 任何实际的流式传输
  • 因此，即使YouTube或Vimeo“视频”托管在HTTP服务器通过HTTP（S）服务的HTML页面上，我也认为这些页面上的嵌入式视频播放器（实际上是视频的播放位置）实际上正在开始，与流服务器的后续连接以及通过RTSP或其他一些非HTTP协议进行流传输

因此，这是我的理解，我想我首先要问的是，如果以上所述不正确，请先纠正我！假设我或多或少是正确的：

如何在HTML页面中运行并由HTML服务器提供服务的流媒体播放器如何与流媒体服务器建立流（RTSP等）连接（服务RTSP请求）？

如何在HTML页面中运行并由HTML服务器提供服务的流媒体播放器如何与流媒体服务器建立流（RTSP等）连接（服务RTSP请求）？

常用应用

目前，RTSP似乎更多地用于直接直播（例如IP摄像机）或重播（例如引擎）的应用程序/设备接口，而不是用于通过HTTP Web播放接口从物理位置以流方式保存已保存的媒体文件。嵌入式播放器。

RTSP似乎是一种有状态协议，在流式传输时使用的TCP比UDP多，并且它更多地用作连接到TCP / IP网络的服务器设备（如IP摄像机），并通过UDP馈送流等。然后，您可以作为客户端在同一网络上连接到这些提要（服务器），并且可以发出RTSP请求以进行相应利用。

^协议指令

^{尽管在某些方面与HTTP类似，但RTSP定义了可用于控制多媒体播放的控制序列。尽管HTTP是 无状态的，但RTSP却具有状态；在需要跟踪并发会话时使用标识符。像HTTP一样，RTSP使用TCP来维持端到端连接，并且尽管大多数RTSP控制消息是由客户端发送到服务器的，但是某些命令却是朝着另一个方向传播（即，从服务器到客户端）。}

^{这里介绍了基本的RTSP请求。也可以使用一些典型的HTTP请求，例如OPTIONS请求。TCP和UDP的默认传输层端口号均为554 [3]，后者很少用于控制请求。}

^_资源

^无状态

^{无状态协议不需要服务器在多个请求的持续时间内保留有关每个通信伙伴的会话信息或状态。相反，需要在服务器上保留内部状态的协议称为有 状态协议。}

^{无状态的缺点是，可能有必要在每个请求中都包含其他信息，并且服务器需要对这些额外信息进行解释。}

^_资源

逻辑流

我了解这种形式的流媒体流的方式是：

• 媒体内容所驻留的服务器将以正确的格式和片段封装，压缩，编码等视频/音频数据内容，以进行流传输
• 侦听连接以访问流媒体的Web服务器将提供流媒体所需的所有资源
• 客户端请求并下载适用的资源和文件，然后以连续的方式组合它们，以通过配置的URL指针和其他参数进行播放。客户端级别的播放软件将按顺序传输的数据包组合在一起，以允许正确播放内容。

请参阅下面的“ 流技术”部分，以对HTTP和RTSP进行一般比较。

此外

在下面的10个为什么您永远不应该托管自己的视频的原因部分中，我引用了一些要点，以帮助您以“一般”的方式回答您的问题，而不必太具体。

本质上，它说具有嵌入式媒体播放器控件的网站将：

• ^（1）根据客户端的“连接和请求”检测客户端Web浏览器设置，并
• ^（2）这会将编解码器和任何其他客户端检测设置设置为适用的参数值，然后
• ^（3）它会根据嵌入式媒体播放器配置中指向托管服务器上媒体文件URL的进一步代码，直接从托管视频和音频文件的流服务器上流式传输视频。

^{流媒体技术}

^{客户端浏览器必须从服务器接收数据，并将其传递给流应用程序进行处理。流应用程序将数据转换为图片和声音。成功完成此过程的一个重要因素是客户端能够更快地接收数据，从而使应用程序可以显示信息。多余的数据存储在缓冲区中，缓冲区是为应用程序内的数据存储保留的内存区域。如果两个系统之间的数据传输延迟，则缓冲区将清空，并且材料的呈现将不流畅。}

^HTTP协议

^{HTTP是在Internet上链接文档的主要方式。客户端与包含要流传输的文件的服务器建立连接，检索文件并关闭连接。HTTP服务器将与浏览器通信的文件类型。}

^{使用HTTP的好处}

^{使用HTTP传输文件时，不需要特殊的传输服务器。只要您的浏览器了解MIME类型，它就可以从HTTP服务器接收流文件。使用HTTP传输文件的独特优势之一是它可以穿过防火墙并利用代理服务器。}

^缺点

^{HTTP流使用TCP / IP（传输控制协议和Internet协议）来确保文件的可靠传递。此过程检查丢失的数据包，并要求将其重新传输。当您希望数据在传送时丢失时不予理会时，这在流传输方案中会成为问题，因此动态文件会继续播放。HTTP无法检测调制解调器的速度，因此服务器管理员必须有针对性地为具有不同连接类型的服务器用户生成具有不同压缩率的文件。在高要求的情况下，不建议从HTTP服务器流式传输文件。}

^RTSP协议

^{RTSP是大多数流服务器供应商使用的标准协议。RTSP服务器使用UDP（用户数据报协议）来传输媒体文件。UDP不会持续检查文件是否已到达其目的地。这对流应用程序来说是一个优点，因为只要延迟时间不太长，它就允许中断文件传输。此方法的结果是有时会丢失数据，但是如果延迟很小，则文件将继续播放。}

^资源

^{为什么您不应该托管自己的视频的10个原因}

^{我们正在谈论嵌入与自托管视频}

^{首先，您将视频文件上传到第三方视频托管服务，例如YouTube，Vimeo或Wistia。}

^{然后，您复制它们提供给您的一小段代码，然后将其粘贴到您自己的WordPress网站上的帖子或页面中。该视频将显示在您的网站上您粘贴嵌入代码的位置，但是视频本身是从视频主机的服务器（而不是您自己的Web服务器）上流式传输的，而您的Web服务器是托管WordPress网站的位置。}

^{4. Web视频没有单一文件格式标准}

^{当前的HTML5规范草案未指定浏览器应支持的视频格式。结果，主要的Web浏览器出现了差异，每种浏览器都支持不同的格式。Internet Explorer和Safari将播放H.264（MP4）视频，但不播放WebM或Ogg。Firefox将播放Ogg或WebM视频，但不会播放H.264。幸运的是，Chrome可以播放所有主要的视频格式，但是如果您要确保视频可以在所有主要的网络浏览器上播放，则必须将视频转换为多种格式：.mp4，.ogv和.webm}

^{5.希望您喜欢转换视频。很多。}

^{利用高速Internet连接，大多数观众可能会从台式机或笔记本电脑上观看视频。对于这些人来说，您将希望提供一个高清质量的大文件，以便他们可以选择全屏观看。通常，这意味着以高流比特率（5000 – 8000 kbps）传输1080p或720p文件。}

^{但是，您还需要对较小的较低分辨率版本进行编码，以传送到手机和平板电脑等移动设备，以及以较慢的Internet连接传送给查看器。}

^{6.视频播放器}

^{视频播放器是您安装在网站上的一小部分Web软件，它将自动检测哪个设备正在请求您的视频及其连接速度，然后将适当的版本提供给该人。}

^{7.繁琐的代码[或简码]}

^{无论您使用的是第三方插件还是WordPress的内置视频功能，您都需要创建一些代码来告诉视频播放器您创建的格式以及它们在服务器上的位置。看起来像这样……}

<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>

那么，向您的网站添加视频的最佳解决方案是什么？

只需使用第三方视频托管服务，然后将您的视频嵌入WordPress帖子或页面即可。

第一步：将您的视频上传到Vimeo PRO等流行的，完善的视频托管服务之一。

第二步：上传视频并准备观看后，将URL复制到视频中。返回您的WordPress网站，然后将该URL粘贴到您希望视频出现的帖子或页面中。

---

^{当人们查看您的页面时，视频将出现在您粘贴URL的位置。但是，视频文件本身将从视频主机的服务器流化，而不是托管WordPress网站的服务器。}

_{嵌入式视频播放器将自动检测用户的设备，浏览器和Internet连接速度，然后向他们提供相应版本的视频文件。无需在您的网站上进行安装。没有插件可以保持最新。没有棘手的代码。}

_资源

我将主要在下面处理您的问题，即在浏览器中显示视频时会发生什么。该主题涉及面很广，因此我将只涉及相关项目。

HTML5引入了<VIDEO>标签，该标签解决了在使用JavaScript和CSS时将显示的视频集成到浏览器中的问题。先前的<OBJECT>标记需要外部软件，并且与页面集成不良。实际上，新标签要求浏览器也要成为视频播放器，尽管没有施加任何标准。结果是标准的完全碎片化，唯一的解决方案是视频服务器将提供几种视频格式，并在<VIDEO>标记中指定所有这些替代源，浏览器将从中选择支持的源。

具有多个来源的标签示例：

<video width=320 height=240 controls poster=image.jpg>
   <source src="movie.mpd">
   <source src="movie.webm">
   Your browser does not support the video tag.
</video>

所述<VIDEO>标记本身是协议无关，所以可以使用由浏览器包括RTSP支持的任何协议。对MPEG-DASH协议 （HTTP上的动态自适应流）的支持最近变得非常全面，因此它将在大多数本机或使用HTML5的设备和浏览器上播放，这意味着不需要额外的插件。请参阅此设备和浏览器兼容性图表。另请参阅此Mozilla文章，以准备为服务MPEG-DASH的服务器。DASH通过HTTP起作用，因此只要您的HTTP服务器支持字节范围请求，并且DASH设置为使用即可提供.mpd文件，它就可以起作用mimetype="application/dash+xml"。

客户端和服务器之间的正常交互看起来类似于以下内容。对于HTML5 VIDEO，浏览器也是播放器，尽管它可能会打开新的播放连接。

初始连接提供了客户端用于显示视频的元数据。如果使用RTSP协议获取该元数据，则稍后将创建RTP连接以传输视频和音频数据。RTCP协议用于将其他命令传输到服务器。

RTP，RTCP和RTSP都在不同的端口上运行。通常，当RTP在端口N上时，RTCP在端口N + 1上。一个RTP会话可能包含多个要在接收者端组合的流；例如，音频和视频可能在单独的频道上。

为了使没有人被锁定在您的内容之外，您应该同时提供免版税的编解码器，webM或Theora，H.264视频以及Vorbis和MP3音频。（容易地说，很难做。）

这是RTSP的详细信息：

1. 客户端通常在TCP端口554（RTSP的知名端口）上建立与服务器的TCP连接。

2. 然后，客户端将开始发出一系列RTSP标头命令，这些命令的格式与HTTP相似，每一个都由服务器确认。在这些RTSP命令中，客户端将向服务器描述会话要求的详细信息，例如其支持的RTSP版本，用于数据流的传输以及任何相关的UDP或TCP端口信息。该信息使用DESCRIBE和SETUP标头传递，并在服务器响应上增加了会话ID，客户端和任何临时代理设备可以使用该会话ID在进一步的交换中标识流。

3. 一旦传输参数的协商完成，客户端将发出PLAY命令以指示服务器开始传递RTP数据流。

4. 客户端决定关闭流后，将发出TEARDOWN命令以及会话ID，以指示服务器停止与该ID相关联的RTP传递。

进一步阅读：

• 流协议的基础
• 了解应用层协议-实时流协议（RTSP）
• HTML5视频简介（Opera）
• HTML5音频和视频：您必须了解的内容
• RTSP分析Wireshark

这是一个快速而肮脏的答案-

在网络上播放视频和实际实时流传输之间有区别。

播放是通过网页中包含的播放器完成的（可能使用Flash，JS或html5视频对象）。客户端（浏览器）下载并运行该播放器。播放器又从简单的下载网址获取视频。实际上，即使使用Youtube，也有一些程序可让您直接访问托管的视频文件并像下载任何文件一样下载它们。由于系统使用常规的旧下载链接，因此无需复杂的流协议，例如RTSP

实时流式传输（例如，来自网络摄像头）是..棘手的。Flash内置了此功能，但不应再使用它。HTML5视频不支持实时流，但是人们可以通过使文件托管服务器不断更改其提供的视频文件来“欺骗”它。