ckplayer实现一个丰富接口的视频播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:ckplayer实现一个丰富接口的视频播放器效果代码,可实现广告播放、添加图层、弹幕、清晰度切换、放大、速度控制等效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ckplayer.js?v=111"></script>
</head>
<body>
<div id="video" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var videoObject = {
//playerID:'ckplayer01',//播放器ID,第一个字符不能是数字,用来在使用多个播放器时监听到的函数将在所有参数最后添加一个参数用来获取播放器的内容
container: '#video',
//容器的ID或className
variable: 'player',
//播放函数名称
loaded: 'loadedHandler',
//当播放器加载后执行的函数
loop: true,
//播放结束是否循环播放
//autoplay: true, //是否自动播放
//duration: 500, //设置视频总时间
cktrack: 'material/srt.srt',
//字幕文件
poster: '//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png',
//封面图片
preview: {
//预览图片
file: ['//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png',
'//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'],
scale: 2
},
config: '',
//指定配置函数
debug: true,
//是否开启调试模式
//flashplayer: true, //强制使用flashplayer
drag: 'start',
//拖动的属性
seek: 0,
//默认跳转的时间
//playbackrate:1,//默认速度的编号,只对html5有效,设置成-1则不显示倍速
//advertisements:'website:ad.json',
//front:'frontFun',//上一集的操作函数
//next:'nextFun',//下一集的操作函数
//广告部分开始
adfront: '//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4,//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4',
//前置广告
adfronttime: '15,15',
adfrontlink: '',
adpause: '//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4,//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4',
adpausetime: '5,5',
adpauselink: '',
adinsert: '//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4,//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4',
adinserttime: '10,10',
adinsertlink: '',
inserttime: '10,80',
adend: '//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4,//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4',
adendtime: '15,15',
adendlink: '',
//广告部分结束
promptSpot: [//提示点
{
words: '提示点文字01',
time: 30
},
{
words: '提示点文字02',
time: 150
}],
//mobileCkControls:true,//是否在移动端(包括ios)环境中显示控制栏
//live:true,//是否是直播视频,true=直播,false=点播
video: [
['//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4',
'video/mp4',
'中文标清',
0],
['//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4',
'video/mp4',
'中文高清',
0],
['//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4',
'video/mp4',
'英文高清',
10],
['//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4',
'video/mp4',
'英文超清',
0]
]
};
var player = new ckplayer(videoObject);
function loadedHandler() {
player.addListener('error', errorHandler); //监听视频加载出错
player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据
player.addListener('duration', durationHandler); //监听播放时间
player.addListener('time', timeHandler); //监听播放时间
player.addListener('play', playHandler); //监听暂停播放
player.addListener('pause', pauseHandler); //监听暂停播放
player.addListener('buffer', bufferHandler); //监听缓冲状态
player.addListener('seek', seekHandler); //监听跳转播放完成
player.addListener('seekTime', seekTimeHandler); //监听跳转播放完成
player.addListener('volume', volumeChangeHandler); //监听音量改变
player.addListener('full', fullHandler); //监听全屏/非全屏切换
player.addListener('ended', endedHandler); //监听播放结束
player.addListener('screenshot', screenshotHandler); //监听截图功能
player.addListener('mouse', mouseHandler); //监听鼠标坐标
player.addListener('frontAd', frontAdHandler); //监听前置广告的动作
player.addListener('wheel', wheelHandler); //监听视频放大缩小
player.addListener('controlBar', controlBarHandler); //监听控制栏显示隐藏事件
player.addListener('clickEvent', clickEventHandler); //监听点击事件
player.addListener('definitionChange', definitionChangeHandler); //监听清晰度切换事件
player.addListener('speed', speedHandler); //监听加载速度
}
function errorHandler() {
console.log('出错')
changeText('.playerstate', '状态:视频加载错误,停止执行其它动作,等待其它操作&.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0