[转] 视频直播前端方案

时间 2019-11-18

标签视频直播前端方案繁體版

原文原文链接

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

http live streaming（hls）

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

因为大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议，因此在移动端很是适合使用HLS协议进行直播。html

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

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

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

值得注意的是hls在pc端仅仅支持safari浏览器（由于就是苹果实现的hls技术），因此在相似chrome浏览器上是没法看到视频的。即便在chrome的调试器中模拟移动端仍是没法播放视频。ios

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

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

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

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

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

RTMP Real Time Messaging Protocol

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，如今属于 Adobe。这套方案须要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，而且在浏览器中只能使用 Flash 实现播放器。它的实时性很是好，延迟很小，但没法支持移动端ios h5页面播放是它的硬伤。

虽然没法再ios的H5页面播放，可是对于ios原生应用是能够本身写解码去解析的。并且rtmp延迟低，咱们公司就采用了rtmp协议。

在pc浏览器端，HTML5video标签没法播放rtmp协议的视频，因此仍是须要借用flash去播放。

以前提到的几个video库均可以实现这样的效果，这里就video.js为例。

<body> <video class="video-js vjs-default-skin" controls="controls" width="375" height="300" id="player1" webkit-playsinline> <source src="rtmp://wsrtmp.yizhibo.tv:1935/live/0p4kf8k3Aubp" type='rtmp/mp4'> </video> <script type="text/javascript" src="lib/video.min.js"></script> <script> videojs.options.flash.swf = "lib/video-js.swf"; </script> <script type="text/javascript"> var player = videojs('player1', {}, function() { console.log('Good to go!'); this.play(); this.on('ended', function() { console.log('awww...over so soon?'); }); }); </script> </body>

youtube pc端html5实现方法

待