直播这么火你做过了么！？！移动端HTML5 video标签 以及支持PC端直播

pc端直播及移动端网页直播

1.移动端对video标签的支持

刚接到项目时，自己也查了很多资料，以前没做过有关直播的项目，然后自己就先写了一个app的分享页。

具体用到的技术很简单，用了h5的新标签video标签，其实使用video标签还是挺简单的：

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签<source>。Video标签内除了可以包

含<source>标签外，还可以包含当指定的视频都不能 播放时，返回的内容。

这里可能相对有用一点的就是,在iphone手机上默认播放时全屏播放的，

这里可以加上一个属性去掉 webkit-playsinline="true", 如果ios低于9以下的需要在ios端写入代码 webview.allowsInlineMediaPlayback = YES; 

还有属性x-webkit-airplay="true",以及playsinline="ture",这里安卓设备和苹果设备需要分别判断然后做相应处理，根据需要做调整。安卓默认会有小窗，我们公司现

在对安卓要求不高所以我之前解决办法就是，让其height为120%；然后小窗搞好不见，就像是全屏了，当然在video标签上写其他东西就不能这样写了。

移动端用hls，HTTP Live Streaming（HLS）是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载

文件。由于大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议，所以在移动端非常适合使用HLS协议进行直播。上图所示的m3u8格式就是支持HLS协

议的流媒体格式。使用方法也非常简单，直接在html中嵌入一个video标签及可。

（盗图一波）

看完图，值得注意的是hls在pc端仅仅支持safari浏览器（因为就是苹果实现的hls技术），所以在类似chrome浏览器上是无法看到视频的。即使在谷歌浏览器

chrome的调试器中模拟移动端还是无法播放视频。给大家推荐一个播放m3u8格式文件的网站，只要将视频地址扔到这个网站，就能播放。http://osmfhls.kutu.ru/

2.pc端直播

pc端似乎现在是一种很尴尬的局面，有的浏览器似乎已经抛弃了flash，但现在上很多直播都用的直播流转码成flash，也就是我们最先看到的<object>标签，其实

flash是耗性能的，自己亲身测试时已经感受到过，苹果电脑烧的烫得不行（笔记本macpro），台式肯定不至于哈.进入正题首先做PC端直播呢你肯定需要rtmp即

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务，

如 Adobe Media Server，并且在浏览器中只能用 Flash 实现直播播放。它的实时性很不错，主要看你的cdn延迟，一般延迟就2、3s，所以延迟很小，但无法支持

移动端ios h5页面播放是它的硬伤。虽然无法再ios的H5页面播放，但是对于ios原生应用是可以自己写解码去解析的。而且rtmp延迟低，我们公司就采用了rtmp协

议。在pc浏览器端，HTML5 video标签无法播放rtmp协议的视频，这就尴尬了，所以还是需要借用flash去播放。

下面给大家介绍rtmp转flash用到的videojs，这个东西功很强大，http://videojs.com/，引入videojs.hls和videojs.dev即可感受直播的快感。多看文档少说话。在

github上面也有很多实例，如果实在找不到可以留言给我很乐意帮助大家，当然不希望把你带偏了哈，我也是个小白菜，遨游在it前端知识的大海里，越学感觉会的

越少。今天晚上就分享这么多，明天还要早起工作。

（本人自己也处在学习当中，分享肯定会有许多错误，望各位大神见谅有事私聊，别打脸很疼的，^_^ 。后面会分享自己在项目中使用socket和融云即时消息遇到的坑）