2019独角兽企业重金招聘Python工程师标准>>> 
前期探索
- 做任何新东西都是一个踩坑的过程，当时公司的需求是能够一页展示50-60个视频，达到监控直播间的目的。 而直播协议的视频格式和普通的又不一样，是rtmp,flv,m3u8这三种，而普通H5的video标签不能够支持， 虽然在手机端H5可以支持m3u8的格式，但在pc端是不能够支持的。所以只有依赖第三方框架。
ckplayer使用方法
- 下载地址：http://www.ckplayer.com/down/
- 引入：一个js文件和一个含有swf文件的文件夹
// 1.定义播放相关参数
// 2.定义播放界面相关参数
// 3.将视频源嵌入flash
ckplayer调用过程和参数含义
//以下为调用播放器的标准代码
var flashvars = {
f: 'http://movie.ks.js.cn/flv/2011/11/8-1.flv',//视频地址
a: '',//调用时的参数，只有当s>0的时候有效
s: '0',//调用方式，0=普通方法（f=视频地址），1=网址形式,2=xml形式，3=swf形式(s>0时f=网址，配合a来完成对地址的组装)
c: '0',//是否读取文本配置,0不是，1是
x: '',//调用xml风格路径，为空的话将使用ckplayer.js的配置
i: '',//初始图片地址
d: 'http://www.ckplayer.com/temp/11.jpg',//暂停时播放的广告，swf/图片
u: 'http://www.baidu.com',//暂停时如果是图片的话，加个链接地址
l: 'http://www.ckplayer.com/down/start.swf',//视频开始前播放的广告，swf/图片/视频
r: '',//视频开始前播放图片/视频时加一个链接地址
t: '1',//视频开始前播放swf/图片时的时间
e: '3',//视频结束后的动作，0是调用js函数，1是循环播放，2是暂停播放，3是调用视频推荐列表的插件
v: '85',//默认音量，0-100之间
p: '1',//视频默认0是暂停，1是播放
h: '1',//播放http视频流时采用何种拖动方法，0是按关键帧，1是按关键时间点
q: '',//视频流拖动时参考函数，默认是start
m: '0',//默认是否采用点击播放按钮后再加载视频，0不是，1是,设置成1时不要有前置广告
g: '',//视频直接g秒开始播放
j: '',//视频提前j秒结束
k: '10|40|80',//提示点时间，如 30|60鼠标经过进度栏30秒，60秒会提示n指定的相应的文字
n: '跳过开头|小企鹅宝宝下水了|跳过结尾',//提示点文字，跟k配合使用，如 提示点1|提示点2
b: '0x000',//播放器的背景色，如果不设置的话将默认透明
w: '',//指定调用自己配置的文本文件,不指定将默认调用和播放器同名的txt文件
//调用播放器的所有参数列表结束
//以下为自定义的播放器参数用来在插件里引用的
my_title: '视频标题',//视频标题
my_url: 'http://www.ckplayer.com/index.php',//本页面地址
my_summary: '这是一个测试页面',//视频介绍，请保持在一行文字，不要换行
my_pic: 'http://www.ckplayer.com/temp/11.jpg'//分享的图片地址
//调用自定义播放器参数结束
};
var params = {bgcolor: '#000000', allowFullScreen: true, allowScriptAccess: 'always'};//这里定义播放器的其它参数如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互
var attributes = {id: 'ckplayer_a1', name: 'ckplayer_a1'};
//下面一行是调用播放器了，括号里的参数含义：（播放器文件，要显示在的div容器，宽，高，需要flash的版本，当用户没有该版本的提示，加载初始化参数，加载设置参数如背景，加载attributes参数，主要用来设置播放器的id）
swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0', 'ckplayer/expressInstall.swf', flashvars, params, attributes); //播放器地址，容器id，宽，高，需要flash插件的版本，flashvars,params,attributes
//调用播放器结束
//第一部分：开关灯
var box = new LightBox('flashcontent');
var $ = function (id) {
return document.getElementById(id)
};
function closelights() {//关灯
box.Show();
$('video').style.width = '940px';
$('video').style.height = '550px';
swfobject.getObjectById('ckplayer_a1').width = 940;
swfobject.getObjectById('ckplayer_a1').height = 550;
}
function openlights() {//开灯
box.Close();
$('video').style.width = '600px';
$('video').style.height = '400px';
swfobject.getObjectById('ckplayer_a1').width = 600;
swfobject.getObjectById('ckplayer_a1').height = 400;
}