视频直播前端方案

最新推荐文章于 2024-05-17 02:17:40 发布

越简单越好

最新推荐文章于 2024-05-17 02:17:40 发布

阅读量3.9k

点赞数

流媒体本质上是：现实的图像，经过编码器压缩，持久化为点播文件或者直播流，经过传输，在终端解码和展示。

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

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

上图所示的m3u8格式就是支持HLS协议的流媒体格式。

使用方法也非常简单，直接在html中嵌入一个video标签及可。

<video class="video" controls="controls"  width="375" height="300" id="player1" webkit-playsinline>
   <source src="../index.m3u8">
</video>

值得注意的是hls在pc端仅仅支持safari浏览器（因为就是苹果实现的hls技术），所以在类似chrome浏览器上是无法看到视频的。即使在chrome的调试器中模拟移动端还是无法播放视频。

这里推荐一个播放m3u8格式文件的网站，只要将视频地址扔到这个网站，就能播放。http://osmfhls.kutu.ru/

video标签拥有很多属性、事件以及方法。http://www.w3school.com.cn/ta...
包含play() pause()等等，这些原生事件方法就能脱离原生video样式，打造独一的风格。

这里推荐一个教程，如何用css3实现自己风格的播放器。http://www.inserthtml.com/201...

另外再提及一点webkit-playsinline属性，在video中增加这个属性，用户在微信App中的webview中打开视频不会进入默认的全屏播放模式，若我们给播放器设置了宽200高200，在有这个属性的前提下打开视频，高宽还是200。

之前有谈到hls协议的视频直播格式无法再pc端播放，但现有许多video库可以结合flash实现m3u8格式的视频在pc端各大浏览器播放。
https://github.com/johndyer/m...
https://github.com/videojs/vi...
https://github.com/jwplayer/j...

mediaElements的网站 http://www.tuicool.com/articles/VJ3YFn

关注