video-js RTMP直播

x33g5p2x  于2022-02-12 转载在 其他  
字(1.7k)|赞(0)|评价(0)|浏览(203)

目前主流的几种直播协议

协议传输方式视频封装格式延时数据分段html播放
httpflvhttpflv连续可通过html5解封包播放(flv.js)
rtmptcpflv tag连续不支持
dashhttpts文件切片可通过html5解封包播放(hls.js)
hls$1mp4 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页面打开播放不了

答:需要本地服务器环境支持,自己起一个本地服务器然后扔进去再打开。

相关文章