目前主流的几种直播协议
协议 | 传输方式 | 视频封装格式 | 延时 | 数据分段 | html播放 |
---|---|---|---|---|---|
httpflv | http | flv | 低 | 连续 | 可通过html5解封包播放(flv.js) |
rtmp | tcp | flv tag | 低 | 连续 | 不支持 |
dash | http | ts文件 | 高 | 切片 | 可通过html5解封包播放(hls.js) |
hls | $1 | mp4 3gp webm | 高 | 切片 | 如果dash文件列表是mp4webm文件,可直接播放 |
RTMP(Real Time Messaging Protocol)
:基于TCP的,由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
HLS(HTTP Live Streaming)
:基于HTTP的,是Apple公司开放的音视频传输协议。
HTTP FLV
:将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。
我们目前使用的rtmp
流,库使用video-js
,不过这里需要注意的一点是我们要使用x5
版本的,因为x6
版本及以上不支持rtmp
(其实就是不支持flash
了);
所以这里也放上资源下载连接
video.js v5.18.4版 2017-3-24更新(支持ie8)
video-js.swf
html
<div id="content">
<video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered" width="100%" height="100%">
<!-- source放rtmp流地址 -->
<source src="rtmp://168.0.0.157:1935/live/stream11" type="rtmp/flv">
<p class="vjs-no-js">
您的浏览器不支持HTML5,请升级浏览器。
</p>
</video>
</div>
123456789
js
//设置本地flash插件地址
videojs.options.flash.swf = "/js/video-js-5.8.2/video-js.swf";
// 初始化视频,设为全局变量
var myPlayer = videojs('rtmpVideo', {
autoplay: true,
controls: true,//控制条
poster: "/images/camera/playStop.png",
techOrder: ["flash"],//设置flash播放
muted: true,// 静音
preload: "auto",// 预加载
language: "zh-CN",// 初始化语言
playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度
}, function () {
console.log("--------------成功初始化视频--------------");
myPlayer.one("playing", function () { // 监听播放
console.log("开始播放");
});
myPlayer.one("error", function (error) { // 监听错误
console.error("监听到异常,错误信息:%o",error);
});
});
因为我在写这篇文章的时候后台断掉了调试,没有继续推送,所以没有画面
1、播放器在左上角并且提示无法加载插件
答:下载新的flash插件,因为我用的50版本,都不提示我更新flash,新的chrome版本会提示下载更新。
2、本地html页面打开播放不了
答:需要本地服务器环境支持,自己起一个本地服务器然后扔进去再打开。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq_43842093/article/details/122890625
内容来源于网络,如有侵权,请联系作者删除!