CkplayerX3教程,CkplayerX3网页播放器

2022-11-11  阅读 1052 次

ckplayer界面漂亮!是一款在网页上播放视频的软件,基于javascript和css,其特点是开源,功能强大,不依赖其它插件,二次开发简单方便。

支持贴片广告,切换语言,记忆播放,弹幕,视频预览

支持字幕,截图,旋转视频,缩放视频,同页放置多个播放器

支持点播、直播、直播+回看、m3u8点播+直播、flv点播+直播、ts直播、播放mpd格式视频

yaaibk_202211111527-07.jpg

下面的代码保存为php或html 。在浏览器输入:http://***/ckx3.php?url=http://localhost/mp4/123.mp4或者http://***/ckx3.php?url=http://localhost/mp4/123.m3u8  测试看看能否正常播放放!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKplayerX3播放器www.yaaibk.com</title>
	<link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
	<script type="text/javascript" src="ckplayer/js/flv.min.js"></script>
	<script type="text/javascript" src="ckplayer/js/hls.min.js"></script>
	<script type="text/javascript" src="ckplayer/js/mpegts.min.js"></script>
	<script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>
<style type="text/css">
body,html{height:100%;background-color:#000;margin:0px;padding:0px;overflow:hidden;}
#ckplayer{height:100%;}
</style>
</head>
<body>
<div id="ckplayer"></div>
<script type="text/javascript">
/*
截取当前 url 地址?后面所有的内容 geturl_yaaibk('url');
*/
function geturl_yaaibk(url) {
	var str ='?'+url+'=';
	var str =str.length; // 5
    var query = window.location.search.substring(str);
	return query;
};
//console.log(geturl_yaaibk('url'));
    var videoObject = {
        container: '#ckplayer',//视频容器的ID
		poster: 'ckplayer/js/11144562496.jpg',//封面图片地址
		logo:'ckplayer/js/logo_m.png',
		autoplay: true,//是否自动播放 true false
		seek: '',//默认需要跳转的秒数
		plug:'hls.js',//使用插件,目前支持hls.js:用于在pc端播放m3u8,flv.js:播放flv,mpegts.js:播放ts
		prompt: [{ //提示点功能
			time: 30,
			words: '跳过片头时间',
		},
		{
			time: 220,
			words: '跳过片尾时间',
		}],
		//crossOrigin:'Anonymous',//发送跨域信息,示例:Anonymous
		video: geturl_yaaibk('url'),//视频地址
		//type:'',//视频类型
		//playbackrate: 1,//默认倍速
		//ended:'.video-ended',//结束显示的内容
		webFull:true,//是否启用页面全屏按钮,默认不启用
		theatre:true,//是否启用剧场模式按钮,默认不启用
		//controls:true,//是否显示自带控制栏
		rightBar:true,//是否开启右边控制栏
		smallWindows:true,//是否启用小窗口模式
		smallWindowsDrag:true,//小窗口开启时是否可以拖动 false true
		screenshot:true,//截图功能是否开启
		timeScheduleAdjust:1,//是否可调节播放进度,0不启用,1是启用,2是只能前进(向右拖动),3是只能后退,4是只能前进但能回到第一次拖动时的位置,5是看过的地方可以随意拖动
		//logo:'',//logo
		menu:[{
			title: '优惠券榜单',
			link: 'http://wz.5devip.com/',		
		},
		{
			title: '雅爱 TV',
			link: 'http://bfq.yaaibk.com/',
		},
		{
			title:'播放 / 暂停',
			click:'player.playOrPause',
		},
		{
				title:'关于视频',
				click:'aboutShow'
		}
		],
		information:{//关于视频信息
			//'ID:':'1e0bdbe69e692383',
			'已加载:':'{loadTime}秒',
			'总时长:':'{duration}秒',
			'视频尺寸:':'{videoWidth}x{videoHeight}',
			'音量:':'{volume}%',
			'FPS:':'{fps}',
			'音频解码:':'{audioDecodedByteCount} Byte',
			'视频解码:':'{videoDecodedByteCount} Byte',
			'TITLE:':'演示视频',
			'COPYRIGHT:':'视频版权归《雅爱博客》所有' ,
		},
		title:'雅爱博客',//视频标题,截图用到
		barHideTime:5500,//控制栏隐藏时间
		playbackrateOpen:true,//是否开启控制栏倍速选项
		playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
		
		//cookie:'abcdefg',//cookie名称,在同一域中请保持唯一
		//domain:'http://www.xxx.cc/cs.html',//cookie保存域
		//cookiePath:'/',//cookie保存路径
		//documentFocusPause:false,//窗口失去焦点后暂停播放
		mouseWheelVolume:1,//是否启用鼠标滚轮调节音量功能,0=不启用,1=启用,2=全屏时才启用
		//keyVolume:2,//是否启用键盘控制音量调节,0=不启用,1=启用,2=全屏时才启用
    };
	var player=new ckplayer(videoObject);//初始化播放器
</script>
</body>
</html>


本文地址:http://5devip.com/post/307.html
版权声明:本文为原创文章,版权归 本站 所有,欢迎分享本文,转载请保留出处!

评论已关闭!