112 Star 718 Fork 29

niandeng / ckplayer

 / 详情

M3U8 三种视频清晰度切换没有效果

待办的
创建于  
2020-12-29 00:38

在videoObject 中的 video: [] 属性配置url地址,配置了 Mp4 和 M3U8 两种视频格式的 流畅 高清 超清 6中视频格式
Mp4的清晰度正常切换,但是M3U8的视频清晰度切换后加载失败

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <script type="text/javascript" src="./ckplayer/ckplayer/ckplayer.js" charset="UTF-8"></script>
    <style type="text/css">        html, body {
        margin: 0;
        padding: 0px;
        width: 100%;
        height: 100%;
    }    </style>
</head>
<body>    <!-- <div id="video" style="width: 100%; height: 100%;max-width: 600px;"></div> -->
<div id="video" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
    var videoObject = {
        playerID: 'ckplayer01',
        container: '#video',
        variable: 'player',
        loaded: 'loadedHandler',
        loop: false,
        autoplay: true,
        drag: 'start',
        seek: 3,
        config: '',
        debug: true,
        mobileCkControls: true,
        mobileAutoFull: false,
        html5m3u8: false,
        video: [
            ['https://xxx.com/M3U8/H264/fluent/playlist.m3u8', 'video/m3u8', 'HLS标清', 0],
            ['https://xxx.com/M3U8/H264/hd/playlist.m3u8', 'video/m3u8', 'HLS高清', 0],
            ['https://xxx.complaylist.m3u8', 'video/m3u8', 'HLS超清', 0],
            ['https://xxx.com/Mp4/H264/fluent/playlist.mp4', 'video/mp4', 'MP4标清', 0],
            ['https://xxx.com/Mp4/H264/hd/playlist.mp4', 'video/mp4', 'MP4高清', 0],
            ['https://xxx.com/Mp4/H264/hq/playlist.mp4', 'video/mp4', 'MP4超清', 0]
        ]
};
var player = new ckplayer(videoObject);
</script>
</body>
</html>

评论 (1)

PlumBlossom 创建了任务
PlumBlossom 关联仓库设置为niandeng/ckplayer
展开全部操作日志

m3u8有问题,需要修改ckplayer.js 里面的newDefinition函数

		newDefinition: function(title) {
			var vArr = this.VA;
			var nVArr = [];
			var indexKey = 0;//存储清晰度下标
			for (i = 0; i < vArr.length; i++) {
				var v = vArr[i];
				if (v[2] == title) {
					indexKey = i;
					nVArr.push(v);
					this.sendJS('definitionChange', i + '');
				}
			}
			if (nVArr.length < 1) {
				return;
			}
			if (this.V != null && this.needSeek == 0) {
				this.needSeek = this.V.currentTime;
			}
			if (this.getFileExt(nVArr[0][0]) != '.m3u8') {
				this.isM3u8 = false;
			}
			if (!this.isM3u8) {
				if (nVArr.length == 1) {
					this.V.innerHTML = '';
					this.V.src = nVArr[0][0];
					this.V.currentSrc = nVArr[0][0]; 
				} else {
					var source = '';
					nVArr = this.arrSort(nVArr);
					for (i = 0; i < nVArr.length; i++) {
						var type = '';
						var va = nVArr[i];
						if (va[1]) {
							type = ' type="' + va[1] + '"';
						}
						source += '<source src="' + va[0] + '"' + type + '>';
					}
					this.V.removeAttribute('src');
					this.V.innerHTML = source;
					this.V.currentSrc = nVArr[0][0]; 
				}
			} else {
				this.V.innerHTML = '';
				this.V.src = vArr[indexKey][0]; 
				this.V.currentSrc = vArr[indexKey][0];
				this.embedHls(vArr[indexKey][0], this.vars['autoplay']);
			}
			this.V.autoplay = 'autoplay';
			this.V.load();
			if (this.playbackRateTemp != 1) {
				this.V.playbackRate = this.playbackRateTemp; //定义倍速
			}
			this.timerErrorFun();
		}

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
JavaScript
1
https://gitee.com/niandeng/ckplayer.git
git@gitee.com:niandeng/ckplayer.git
niandeng
ckplayer
ckplayer

搜索帮助