视频直播 - 前端移动端
程序员文章站
2022-06-10 10:38:37
...
前端在移动端上关于视频直播方面
随着直播的热火，希望现在的我学习这块不算晚，看了一些博客，觉得有必要记录下来，为了日后的需要
http live streaming（hls） – 适用于移动端
hls是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。
注：上图所示的m3u8格式就是支持HLS协议的流媒体格式。
这样对于我们就比较简单了，只要在页面上加上以下代码就ok了
<video class="video" controls="controls" width="375" height="300" id="player" webkit-playsinline>
<source src="./index.m3u8">
</video>
特别注意的是：1.hls在pc端仅仅支持safari浏览器（因为就是苹果实现的hls技术），所以在类似chrome浏览器上是无法看到视频的。即使在chrome的调试器中模拟移动端还是无法播放视频。2.webkit-playsinline属性，在video中增加这个属性，用户在微信App中的webview中打开视频不会进入默认的全屏播放模式，若我们给播放器设置了宽200高200，在有这个属性的前提下打开视频，高宽还是200。
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="player" webkit-playsinline>
<source src="rtmp://wsrtmp.yizhibo.tv:1935/live/0p4kf8k3Aubp" type='rtmp/mp4'>
</video>
<script type="text/javascript" src="js/video.min.js"></script>
<script>
videojs.options.flash.swf = "js/video-js.swf";
</script>
<script type="text/javascript">
var player = videojs('player', {}, function() {
console.log('Hello word!');
this.play();
this.on('ended', function() {
console.log('yes,ended');
});
});
</script>
</body>