调整视频与图片的全屏播放逻辑

src/stage/index/scene/ImageWareFullScreenScene.js

@@ -49,46 +49,66 @@ class ImageWareFullScreenScene extends scene {
 		const hasNextWare = this.curWareIndex < this.wareList.length - 1 ? true : false;
 		//当前图片是该图片课件最后一张图片，且后边还有课件则切换课件
 		if (this.curImageIndex === this.curImageList.length - 1 && hasNextWare) {
-			const nextWareIndex = this.curWareIndex + 1;
-			this.dynamicChangeWare(nextWareIndex, 'NEXT')
+			// const nextWareIndex = this.curWareIndex + 1;
+			// this.dynamicChangeWare(nextWareIndex, 'NEXT')
+			return;
 		//当前图片是该图片课件最后一张图片，且后边没有课件，给出提示
 		} else if (this.curImageIndex === this.curImageList.length - 1 && !hasNextWare) {
-			TVUtil.Toast.show('已经是最后一个课件了', 2000);
+			// TVUtil.Toast.show('已经是最后一个课件了', 2000);
+			return;
 		//当前图片不是该图片课件的最后一张图片
-    	} else {
+  	} else {
 			this.curImageIndex += 1;
 			this.renderImageView();
-    	}
+			if (this.curImageIndex === this.curImageList.length - 1) {
+				document.getElementById('imgRight').style.display = 'none';
+			}
+			if (this.curImageIndex === 1) {
+				document.getElementById('imgLeft').style.display = 'block';
+			}
+  	}
 	}
 
 	keyLeftHandler() {
 		const hasPreviousWare = this.curWareIndex === 0 ? false : true;
 		//当前图片是该图片课件的第一张图片，且前边还有课件
-	    if (this.curImageIndex == 0 && hasPreviousWare) {
-			const previousWareIndex = this.curWareIndex - 1;
-			this.dynamicChangeWare(previousWareIndex, 'BACK');
+	  if (this.curImageIndex == 0 && hasPreviousWare) {
+			// const previousWareIndex = this.curWareIndex - 1;
+			// this.dynamicChangeWare(previousWareIndex, 'BACK');
+			return;
 		//当前图片是该图片课件的第一张图片，且前边没有课件，则给出提示
 		} else if (this.curImageIndex === 0 && !hasPreviousWare) {
-			TVUtil.Toast.show('已经是第一个课件了', 2000);
+			// TVUtil.Toast.show('已经是第一个课件了', 2000);
+			return;
 		//当前图片不是该图片课件的第一张图片
 		} else {
 			this.curImageIndex -= 1;
 			this.renderImageView();
+			if (this.curImageIndex === 0) {
+				document.getElementById('imgLeft').style.display = 'none';
+			}
+			if (this.curImageIndex === this.curImageList.length - 2) {
+				document.getElementById('imgRight').style.display = 'block';
+			}
 		}
 	}
 
 	onCreate(data) {
-	    this.wareList = data.wareList;
-	    this.curWareIndex = data.curWareIndex;
-	    if (data.curImageList) {
+    this.wareList = data.wareList;
+    this.curWareIndex = data.curWareIndex;
+    if (data.curImageList) {
 			this.curImageList = data.curImageList;
-	    }
-	    if (data.curImageIndex) {
+    }
+    if (data.curImageIndex) {
 			this.curImageIndex = data.curImageIndex;
-	    }
-	    this.curWareType = this.wareList[this.curWareIndex].type;
+    }
+    this.curWareType = this.wareList[this.curWareIndex].type;
 		this.setContentView(require('../../../res/tpl/ImageWareFullScreen.tpl'), {}, 'ImageWareFullScreen', {}, () => {
 			this.renderImageView();
+			document.getElementById('imgLeft').style.display = 'none';
+			if (this.curImageList.length === 1) {
+				document.getElementById('imgRight').style.display = 'none';
+			}
 		});
 	}
 
@@ -113,15 +133,15 @@ class ImageWareFullScreenScene extends scene {
 	}
 
 	onOK(e) {
-        // 后退
-        if (e.target.con.classList.contains('goback')) {
+    // 后退
+    if (e.target.con.classList.contains('goback')) {
 			this.hideScene({
 				curWareIndex: this.curWareIndex,
 				curImageList: this.curImageList,
 				curImageIndex: this.curImageIndex,
 			}, 'LessonScene');
-            return;
-        }
+      return;
+    }
 		if (e.target.id === 'imgLeft') {
 			this.keyLeftHandler();
 		} else if (e.target.id === 'imgRight') {

src/stage/index/scene/LessonScene.js

@@ -144,14 +144,17 @@ class LessonScene extends scene {
     			if (list && list.length >= 1) {
     				playUrl = Utils.videoUrlFormat(list[0].url);
     			}
+          /*
     			let videoViewDom =
-                `
-                  <div id="view-full-screen" fe-role="Widget" class="view-full-screen-video">
-                  </div>
-                  <div id="view-video-start" fe-role="Widget">
-                    <div class="transparent-btn">播放</div>
-                  </div>
-                `;
+            `
+              <div id="view-full-screen" fe-role="Widget" class="view-full-screen-video">
+              </div>
+              <div id="view-video-start" fe-role="Widget">
+                <div class="transparent-btn">播放</div>
+              </div>
+            `;
+          */
+          let videoViewDom = '';
     			document.getElementById('view-bottom').innerHTML = videoViewDom;
     			this.moye.root.reRender();
     			this.renderVideoView(title, playUrl, type);
@@ -161,12 +164,12 @@ class LessonScene extends scene {
     			`
     				<div id="view-full-screen" fe-role="Widget" class="view-full-screen-img"></div>
     				<div id="view-previous" fe-role="Widget">
-                        <div class="transparent-btn">上一页</div>
-                    </div>
+              <div class="transparent-btn">上一页</div>
+            </div>
     				<div id="view-page">1/1</div>
-                        <div id="view-next" fe-role="Widget">
-                        <div class="transparent-btn">下一页</div>
-                    </div>
+              <div id="view-next" fe-role="Widget">
+              <div class="transparent-btn">下一页</div>
+            </div>
     			`;
     			document.getElementById('view-bottom').innerHTML = imageViewDom;
     			this.moye.root.reRender();
@@ -194,25 +197,25 @@ class LessonScene extends scene {
     * 渲染视频视图
     */
     renderVideoView(name, url, type) {
-        if (window.efunbox) {
-            window.efunbox.initAndroidPlayer(
-            	name,
-            	url,
-            	1, //与android里的音视频类型定义有关，这里写死为type=1
-            	this.videoPosition.top,
-            	this.videoPosition.left,
-            	this.videoPosition.width,
-            	this.videoPosition.height,
-            	false
-            );
-            window.efunbox.start();
-            this.videoPlayer = window.efunbox;
-        } else {
-            const videoDom = `<div id="hls-video"></div>`;
-            document.getElementById('view-content').innerHTML = videoDom;
-            this.videoPlayer = new EfunVideoPlayer();
-            this.videoPlayer.initPlayer(url, 'hls-video');
-        }
+      if (window.efunbox) {
+          window.efunbox.initAndroidPlayer(
+          	name,
+          	url,
+          	1, //与android里的音视频类型定义有关，这里写死为type=1
+          	this.videoPosition.top,
+          	this.videoPosition.left,
+          	this.videoPosition.width,
+          	this.videoPosition.height,
+          	false
+          );
+          window.efunbox.start();
+          this.videoPlayer = window.efunbox;
+      } else {
+          const videoDom = `<div id="hls-video"></div>`;
+          document.getElementById('view-content').innerHTML = videoDom;
+          this.videoPlayer = new EfunVideoPlayer();
+          this.videoPlayer.initPlayer(url, 'hls-video');
+      }
     	// 监控到初始化视频成功后暂停画面
     	this.timer = window.setInterval(() => {
     		if (this.videoPlayer.playStatus()) {
@@ -235,29 +238,31 @@ class LessonScene extends scene {
     			if (list && list.length >= 1) {
     				playUrl = Utils.videoUrlFormat(list[0].url);
     			}
-                let playText = '播放';
-                if (this.videoPlayer && this.videoPlayer.playStatus()) {
-                    playText = '暂停';
-                }
+          /*
+          let playText = '播放';
+          if (this.videoPlayer && this.videoPlayer.playStatus()) {
+              playText = '暂停';
+          }
     			let videoViewDom =
-                `
-                  <div id="view-full-screen" fe-role="Widget" class="view-full-screen-video">
-                  </div>
-                  <div id="view-video-start" fe-role="Widget">
-                    <div class="transparent-btn">${playText}</div>
-                  </div>
-                `;
-    			document.getElementById('view-bottom').innerHTML = videoViewDom;
+            `
+              <div id="view-full-screen" fe-role="Widget" class="view-full-screen-video">
+              </div>
+              <div id="view-video-start" fe-role="Widget">
+                <div class="transparent-btn">${playText}</div>
+              </div>
+            `;
+          */
+    			document.getElementById('view-bottom').innerHTML = '';
     			this.moye.root.reRender();
-                //如果是H5播放器，则重新创建video标签
-                if (window.efunbox) {
-                    window.efunbox.customScreen(270, 790, 1072, 603);
-                } else {
-                    const videoDom = `<video id="hls-video" controls>你的浏览器不支持视频播放</video>`;
-                    document.getElementById('view-content').innerHTML = videoDom;
-                    this.videoPlayer = new EfunVideoPlayer();
-                    this.videoPlayer.initPlayer(playUrl, 'hls-video');
-                }
+          //如果是H5播放器，则重新创建video标签
+          if (window.efunbox) {
+              window.efunbox.customScreen(270, 790, 1072, 603);
+          } else {
+            const videoDom = `<div id="hls-video"></div>`;
+            document.getElementById('view-content').innerHTML = videoDom;
+            this.videoPlayer = new EfunVideoPlayer();
+            this.videoPlayer.initPlayer(playUrl, 'hls-video');
+          }
     			break;
     		case Consts.TYPE_IMAGE:
     			let imageViewDom =
@@ -275,8 +280,8 @@ class LessonScene extends scene {
     			this.moye.root.reRender();
     			this.renderImageView();
     			break;
-            default:
-                break;
+        default:
+          break;
     	}
     }
 

src/stage/index/style/ImageWareFullScreen.less

@@ -23,7 +23,7 @@
 		height: 100%;
 	}
 	&.fe-focus {
-		border: solid unit(@borderSize, rem) #ffe100;
+		// border: solid unit(@borderSize, rem) #ffe100;
 	}
 }
 #imgRight {
@@ -40,6 +40,6 @@
 		height: 100%;
 	}
 	&.fe-focus {
-		border: solid unit(@borderSize, rem) #ffe100;
+		// border: solid unit(@borderSize, rem) #ffe100;
 	}
 }

src/stage/index/style/LessonScene.less

@@ -97,7 +97,7 @@
 		top: 1.6rem;
 		left: 7.9rem;
 		width: 10.72rem;
-		height: 8.15rem;
+		height: 8.03rem;
 		background-color: #2b63e2;
 
 		#view-top {
@@ -131,7 +131,7 @@
 			left: 0rem;
 			top: 7.03rem;
 			width: 10.72rem;
-			height: 1.12rem;
+			height: 1rem;
 
 			.view-text-ctl-btn{
 				position: absolute;
@@ -172,7 +172,7 @@
 				position: absolute;
 				left: 5.88rem;
 				//left: 4.82rem;
-				top: 0.2rem;
+				top: 0.15rem;
 				width: 1.4rem;
 				//height: 0.65rem;
 				//line-height: 0.65rem;
@@ -220,7 +220,7 @@
 			}
 
 			.view-full-screen-video {
-        		position: absolute;
+        position: absolute;
 				left:1.53rem;
 				top: 0.2rem;
 				width: 2.2rem;

src/util/EfunVideoPlayer.js

@@ -4,6 +4,12 @@ class EfunVideoPlayer {
     this.metadata = null;
   }
 
+  loadedHandler() {
+    this.efunplayer.addListener('loadedmetadata', () => {
+      this.metadata = this.efunplayer.getMetaDate();
+    });
+  }
+
   initPlayer(url, domId) {
     let videoObject = {
       debug: true,
@@ -13,12 +19,11 @@ class EfunVideoPlayer {
       video: url,
     };
     if (Hls.isSupported()) {
-      videoObject.flashplayer = true;
+      videoObject.html5m3u8 = true;
     } else {
       videoObject.flashplayer = true;
     }
     this.efunplayer = new ckplayer(videoObject);
-    this.metadata = this.efunplayer.getMetaDate();
   }
 
   playStatus() {
@@ -26,6 +31,7 @@ class EfunVideoPlayer {
   }
 
   pause() {
+    console.log('click pause btn...');
     this.efunplayer.videoPause();
   }