video-js（一）RTMP直播

目前主流的几种直播协议

协议	传输方式	视频封装格式	延时	数据分段	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>

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页面打开播放不了

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