CKplayer中如何动态给用户提示信息?

最新推荐文章于 2024-05-01 12:03:21 发布

我不爱编程

最新推荐文章于 2024-05-01 12:03:21 发布

阅读量1k

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/weixin_39475476/article/details/105200483

版权

Ckplayer X 版本给用户动态提示信息

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ckplayer</title>
		
		<style type="text/css">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>

	</head>

	<body>
		<div id="video" style="width: 600px; height: 400px;"></div>
		<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>
		<script type="text/javascript">
			var loginShow=false;
			var elementLogin = null; //是否存在提示层
				var videoObject = {
					container: '#video', //容器的ID或className
					variable: 'player',
					flashplayer: false, //是否需要强制使用flashplayer
					loaded: 'loadedHandler', //当播放器加载后执行的函数
					autoplay: true, //自动播放
					video:'rtmp://192.168.1.110:1935/live/jxld_102_1'
					//video:'rtmp://192.168.1.110:1935/live/jxld_102_1'
			};//
			var player = new ckplayer(videoObject);



			function loadedHandler() {
				debugger;

				alert('执行')
                      player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据
                  }

                  function loadedMetaDataHandler() {
                      alert('直播已结束')
                      var metaData = player.getMetaDate();
                      setTimeout(()=>{;
                      	console.table(player)
                          player.addListener('time', timeHandler);
                          showLogin('直播已结束');
                      },3000)
                      var html = ''
                      html += '总时间：' + metaData['duration'] + '秒，';
                      html += '音量：' + metaData['volume'] + '（范围0-1），';
                      html += '播放器的宽度：' + metaData['width'] + 'px，';
                      html += '播放器的高度：' + metaData['height'] + 'px，';
                      html += '视频宽度：' + metaData['videoWidth'] + 'px，';
                      html += '视频高度：' + metaData['videoHeight'] + 'px，';
                      html += '视频原始宽度：' + metaData['streamWidth'] + 'px，';
                      html += '视频原始高度：' + metaData['streamHeight'] + 'px，';
                      html += '是否暂停状态：' + metaData['paused'];
                      console.log(html);
                  }

                  function timeHandler() {
				console.table( player.getMetaDate())
			}


				function showLogin(text) { //显示登录/注册层
					loginShow = true;
					var meta = player.getMetaDate();
					var x = (meta['width'] - 100) * 0.5;
					var y = (meta['height'] - 39) * 0.5 - 80;
					var attribute = {
						list: [ //list=定义元素列表
							{
								type: 'text', //定义元素类型：只有二种类型，image=使用图片，text=文本
								text: text, //图片地址
								color: '#FFFFFF',
								size: 18,
								font:'"Microsoft YaHei"; YaHei; "\5FAE\8F6F\96C5\9ED1"; SimHei; "\9ED1\4F53";Arial',
								leading: 0,
								alpha: 1,
								//透明度
								paddingLeft: 0,
								//左边距离
								paddingRight: 0,
								//右边距离
								paddingTop: 0,
								paddingBottom: 0,
								marginLeft: 0,
								marginRight: 0,
								marginTop: 0,
								marginBottom: 0,
								backgroundColor:'',
								backAlpha: 1,

								backRadius: 0,
								//背景圆角弧度，支持数字统一设置，也支持分开设置[30,20,20,50]，对应上左，上右，下右，下左
								clickEvent: ''
							},
						],
						x: x, //元件x轴坐标，注意，如果定义了position就没有必要定义x,y的值了，支持数字和百分比
						y: y, //元件y轴坐标
						alpha: 1, //元件的透明度
						backgroundColor: '0x000000', //元件的背景色
						backAlpha: 0.1, //元件的背景透明度(0-1)
						backRadius: 0 //元件的背景圆角弧度
					}
					elementLogin = player.addElement(attribute);
				}
		</script>
	</body>

</html>

我不爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CKplayer中如何动态给用户提示信息?

Ckplayer X 版本给用户动态提示信息<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>ckplayer</title> <style type="text/css">body{margin:0;paddi...
复制链接

扫一扫