html5做直播视频和普通视频有什么区别

Question

我知道普通视频直接在video的src里写上视频地址就可以了，直播视频我没做过，可是我想在浏览器或手机上播放直播时video是不是应该接受从后端传过来的数据流？可是要怎么做呢，src该怎么写，后端传过来的直播数据一般是怎么样的？

Answer 1

我猜测你的普通视频是指直接播放视频源文件，例如： MP4、FLV、AVI等。

非HTML5的时代：

1、使用使用 <embed> 标签，需要支持 Flash。 例如 TX视频的 PC端的。

<embed src="movie.swf" height="200" width="200"/>

2、使用 <object> 标签。

<object data="movie.swf" height="200" width="200"/>

以上2个都绕不过 Flash，都需要 Flash 解码器，但是现在手机端已经淘汰 Flash 播放器。

HTML5的时代：

3、使用 <video> 标签, <video> 是 HTML 5 中的新标签。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

使用 <video> 标签的时候，
必须把视频转换为很多不同的格式。
<video> 元素在老式浏览器中无效。
<video> 元素无法通过 HTML 4 和 XHTML 验证。

为了解决浏览器的兼容性，有了 video.js, flv.js, Chimee

这几个都可以直接播放 MP4、FLV、SWF 编码的视频。

推流

以上都是可以直接播放相应的视频文件，但是都需要把视频文件下载下来才能播放，做不到 实时、快速。于是在这基础上有了 HLS和RTMP 协议，这是目前主流的推流解决方案。

大概的过程如下：

把视频源，例如： MP4、FLV、AVI，等切片，切片的索引放到 m3u8文件中，当用户播放或者快进的时候，计算位置，告诉服务器开始切片推流，这样就保证了以 最小的带宽和更短的传输时间 满足用户更多个性化的播放需求。

推流方案的重点是推流服务器，自己没有能力的可以使用云厂商提供的视频推流服务，例如：七牛，腾讯视频等。
浏览器端只需要做好解码播放的功能就行了。

Answer 2

一般就是 hls，这个你网上查一下很多的。库的话，我司视频会议系统用的是 video.js。

大体的流程其实就是设备采集视频源数据，存到服务器中，然后切片，播放端加载相应的 .m3u8 索引文件。

Answer 3

虽然都是video的src直接写链接,但是直播视频流要m3u8的

Answer 4

简单的讲原生video标签可以直接播媒体文件，但是不能直接播直播流，所以你需要一些JS插件，比如video.js，flv.js或者hls.js来实现