接入ckplayer播放器

src/lib/js/ckplayer/language.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+	<language>
+		<adCountdown>[$second]</adCountdown><!--广告播放结束倒计时-->
+		<skipDelay>[$second]</skipDelay>
+		<buttonOver>
+			<play>点击播放</play>
+			<pause>暂停播放</pause>
+			<mute>静音</mute>
+			<escMute>恢复音量</escMute>
+			<full>全屏</full>
+			<escFull>退出全屏</escFull>
+			<previousPage>上一集</previousPage>
+			<nextPage>下一集</nextPage>
+			<definition>点击选择清晰度</definition>
+		</buttonOver>
+		<volumeSliderOver>
+			音量：[$volume]%
+		</volumeSliderOver>
+		<buffer>[$percentage]%</buffer>
+		<timeSliderOver><!--鼠标经过进度条显示的时间格式-->
+			[$timeh]:[$timei]:[$times]
+		</timeSliderOver>
+		<liveAndVod>
+			[$timeh]:[$timei]:[$times]
+		</liveAndVod>
+		<live>
+			直播中 [$liveTimeY]-[$liveTimem]-[$liveTimed] [$liveTimeh]:[$liveTimei]:[$liveTimes]
+		</live>
+		<m3u8Definition>
+			<name>流畅</name>
+			<name>低清</name>
+			<name>标清</name>
+			<name>高清</name>
+			<name>超清</name>
+			<name>蓝光</name>
+			<name>未知</name>
+		</m3u8Definition>
+		<error>
+			<cannotFindUrl>视频地址不存在</cannotFindUrl>
+			<streamNotFound>加载失败</streamNotFound>
+			<formatError>视频格式错误</formatError>
+		</error>
+		<definition>自动</definition>
+	</language>

src/stage/index/index.html

@@ -55,7 +55,15 @@
 	<script src="../../lib/js/core.min.js"></script>
 	<script src="../../lib/js/sha1.min.js"></script>
 	<script src="../../lib/js/md5.min.js"></script>
-	<script src="../../lib/js/hls.js"></script>
+	<script src="../../lib/js/ckplayer/hls.min.js"></script>
+	<script src="../../lib/js/ckplayer/ckplayer.js"></script>
+	<style type="text/css">
+		#ckplayer-dom {
+			width: 100%;
+			height: 9rem;
+			background: #fff;
+		}
+	</style>
 	<script>
 		var ts = '201807251125';
 
@@ -85,5 +93,4 @@
 		}
 	</script>
 </body>
-
 </html>

src/stage/index/scene/LessonScene.js

@@ -1,7 +1,7 @@
 import APIClient from '../../../util/API/APIClient';
 import Consts from '../../../util/Consts';
 import Utils from '../../../util/Utils';
-import HlsVideoPlugin from '../../../util/HlsVideoPlugin';
+import EfunVideoPlayer from '../../../util/EfunVideoPlayer';
 import {CommandBus, CMD_TYPE} from '../../../util/CommandBus';
 
 function matchWare(wareList, wareId) {
@@ -208,10 +208,10 @@ class LessonScene extends scene {
             window.efunbox.start();
             this.videoPlayer = window.efunbox;
         } else {
-            const videoDom = `<video id="hls-video" controls autoplay>你的浏览器不支持视频播放</video>`;
+            const videoDom = `<div id="hls-video"></div>`;
             document.getElementById('view-content').innerHTML = videoDom;
-            this.videoPlayer = new HlsVideoPlugin();
-            this.videoPlayer.initH5Player(url, 'hls-video');
+            this.videoPlayer = new EfunVideoPlayer();
+            this.videoPlayer.initPlayer(url, 'hls-video');
         }
     	// 监控到初始化视频成功后暂停画面
     	this.timer = window.setInterval(() => {
@@ -255,8 +255,8 @@ class LessonScene extends scene {
                 } else {
                     const videoDom = `<video id="hls-video" controls>你的浏览器不支持视频播放</video>`;
                     document.getElementById('view-content').innerHTML = videoDom;
-                    this.videoPlayer = new HlsVideoPlugin();
-                    this.videoPlayer.initH5Player(playUrl, 'hls-video');
+                    this.videoPlayer = new EfunVideoPlayer();
+                    this.videoPlayer.initPlayer(playUrl, 'hls-video');
                 }
     			break;
     		case Consts.TYPE_IMAGE:

src/stage/index/style/LessonScene.less

@@ -120,7 +120,7 @@
 				width: 100%;
 				height: 100%;
 			}
-			video {
+			#hls-video {
 				width: 100%;
 				height: 100%;
 			}

src/util/EfunVideoPlayer.js

@@ -0,0 +1,53 @@
+class EfunVideoPlayer {
+  constructor() {
+    this.efunplayer = null;
+    this.metadata = null;
+  }
+
+  initPlayer(url, domId) {
+    let videoObject = {
+      debug: true,
+      autoplay: true,
+      container: `#${domId}`,
+      variable: 'player',
+      video: url,
+    };
+    if (Hls.isSupported()) {
+      videoObject.flashplayer = true;
+    } else {
+      videoObject.flashplayer = true;
+    }
+    this.efunplayer = new ckplayer(videoObject);
+    this.metadata = this.efunplayer.getMetaDate();
+  }
+
+  playStatus() {
+    return (this.metadata || {})['paused'];
+  }
+
+  pause() {
+    this.efunplayer.videoPause();
+  }
+
+  start() {
+    this.efunplayer.videoPlay();
+  }
+
+  fullScreen() {
+    this.efunplayer.webkitRequestFullScreen();
+  }
+
+  getCurtime() {
+    return this.efunplayer.currentTime * 1000;
+  }
+
+  getDuration() {
+    return this.efunplayer.duration * 1000;
+  }
+
+  seekProgress(currentTime) {
+    this.efunplayer.videoSeek(currentTime);
+  }
+}
+
+module.exports = EfunVideoPlayer;

src/util/Utils.js

@@ -201,7 +201,7 @@ class Utils {
         if (url.startsWith('http')) {
             return url.replace('http://ljvideo.ai160.com', Consts.VIDEO_PATH);
         } else if (url.startsWith('https')) {
-            return url;
+            return url.replace('https', 'http');
         } else {
             return url;
         }