|
楼主 |
发表于 2022-3-28 09:52:03
|
显示全部楼层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ckplayer</title>
<link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
<!--
如果需要使用其它语言,请在此处引入相应的js,比如:<script type="text/javascript" src="ckplayer/language/en.js" charset="UTF-8"></script>
-->
<script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="UTF-8"></script>
</head>
<body>
<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
<script>
var videoObject={},player=null;//定义一个播放器初始化变量以及定义一个播放器变量
function livePlayer(){//配置直播放
if(player){//如果播放器已存在
player.remove();//卸载播放器
}
videoObject = {//配置直播初始化属性
container: '.video', //容器的ID或className
live:1648366459000,//直播开始时间戳
autoplay:true,//自动播放
playbackrateOpen:false,//不显示倍速菜单
plug:'hls.js',
video:'https://www.syhs.org/sztv/liveview/index.m3u8'//直播地址
};
player=new ckplayer(videoObject);//初始化播放
player.seek(function(obj){//监听用户点击进度条
onDemandPlayer(obj['time']);//点击后进行对应的点播配置
});
}
livePlayer();//默认调用直播函数进行播放
function onDemandPlayer(time){//配置点播
if(player){//如果播放器已存在
player.remove();//卸载播放器
}
videoObject = {//配置回看初始化属性
container: '.video', //容器的ID或className
autoplay:true,//自动播放
backLive:true,//显示返回直播按钮
plug:'hls.js',
video:'https://www.syhs.org/sztv/liveview/index.m3u8'//直播地址
};
player=new ckplayer(videoObject);//初始化播放器
player.backLive(function(){//监听用户点击回到直播按钮事件
livePlayer();//调用直播
});
player.ended(function(){//监听当前回看结束自动返回直播
livePlayer();//调用直播
});
}
</script>
</body>
</html> |
|