222

pages/component/commonComponents/video/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container" style="background-color: #000; position: relative">
-		<u-modal :show="show" :title="title" :content='content'></u-modal>
+    <u-modal :show="show" :title="title" :content="content"></u-modal>
     <!-- <u-icon
 		@click="goBack"
 		name="arrow-left"
@@ -17,16 +17,31 @@
     <button type="primary" @click="start()">开始</button>
     <button type="primary" @click="pause()">暂停</button> -->
     <view style="width: 100%; height: 200px">
-			<div class="" style="background-color: #000" ref="videoContent" @tap="renderScript.handleClick"
+      <div
-				id="url-player-test" :videoData="videoData" :winWidth="winWidth" :winHeight="winHeight"
+        class=""
-				:currentVideoList="currentVideoList" :firstTime="firstTime" :isfresh="isfresh" :platform="platform"
+        style="background-color: #000"
-				:isSetFirstTime="isSetFirstTime" :isChange="isChange" :change:videoData="renderScript.receiveMsg"
+        ref="videoContent"
-				:change:winWidth="renderScript.receiveWinWidth" :change:winHeight="renderScript.receiveWinHeight"
+        @tap="renderScript.handleClick"
+        id="url-player-test"
+        :videoData="videoData"
+        :winWidth="winWidth"
+        :winHeight="winHeight"
+        :currentVideoList="currentVideoList"
+        :firstTime="firstTime"
+        :isfresh="isfresh"
+        :platform="platform"
+        :isSetFirstTime="isSetFirstTime"
+        :isChange="isChange"
+        :change:videoData="renderScript.receiveMsg"
+        :change:winWidth="renderScript.receiveWinWidth"
+        :change:winHeight="renderScript.receiveWinHeight"
         :change:firstTime="renderScript.receiveFirstTime"
         :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
-				:change:isfresh="renderScript.receiveIsfresh" :change:platform="renderScript.receiveplatform"
+        :change:isfresh="renderScript.receiveIsfresh"
+        :change:platform="renderScript.receiveplatform"
         :change:isChange="renderScript.receiveIsChange"
-				:change:currentVideoList="renderScript.receiveVideoList"></div>
+        :change:currentVideoList="renderScript.receiveVideoList"
+      ></div>
       <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
         直接调用renderjs中的emitData的方法,传递当前播放时长
       </div>
@@ -35,7 +50,11 @@
         监听结束方法，记录播放时长
       </div>
 
-			<div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false">
+      <div
+        @tap="renderScript.changeVideoData"
+        ref="videoContent3"
+        v-show="false"
+      >
         监听切换视频方法
       </div>
       <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
@@ -45,8 +64,10 @@
         打开视频提示
       </div>
       <div class="fullScreenButton-container">
-				<div :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
+        <div
-					@tap="renderScript.changeVideoScreen"></div>
+          :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
+          @tap="renderScript.changeVideoScreen"
+        ></div>
       </div>
     </view>
     <!-- <view style="width: 100%; height: 200px; position: relative" v-else>
@@ -67,15 +88,12 @@
   </view>
 </template>
 <script>
-	import store from "@/store/index.js";
+import store from "@/store/index.js";
-	import $http from "@/config/requestConfig.js";
+import $http from "@/config/requestConfig.js";
-	import {
+import { mapState, mapMutations } from "vuex";
-		mapState,
-		mapMutations
-	} from "vuex";
 
-	// importScripts('@/static/aliplayer/aliplayer-min.js')
+// importScripts('@/static/aliplayer/aliplayer-min.js')
-	export default {
+export default {
   props: ["currentVideo", "currentVideoList"],
   data() {
     return {
@@ -294,10 +312,7 @@
               }
             });
           }
-						that.$refs.playerView.setPlayerCallBack(({
+          that.$refs.playerView.setPlayerCallBack(({ type, data }) => {
-							type,
-							data
-						}) => {
             switch (type) {
               case "isFullScreen":
                 isFullScreen = Boolean(data);
@@ -314,9 +329,9 @@
     async getData(data, isChange) {
       var that = this;
       if (!this.isSetFirstTime) {
-					var netWork = data.userCourseVideoPositionEntity ?
+        var netWork = data.userCourseVideoPositionEntity
-						data.userCourseVideoPositionEntity.position :
+          ? data.userCourseVideoPositionEntity.position
-						0;
+          : 0;
         var list = [];
         if (uni.getStorageSync("videoOssList")) {
           list = JSON.parse(uni.getStorageSync("videoOssList"));
@@ -503,18 +518,18 @@
   },
 
   created() {},
-	};
+};
 </script>
 
 <script module="renderScript" lang="renderjs">
-	import $ from 'jquery'
+import $ from 'jquery'
-	//  import StaticADComponent from './staticadcomponent/index.js';
+//  import StaticADComponent from './staticadcomponent/index.js';
-	/**
+/**
  * 静态广告组件
  */
 
 
-	export default {
+export default {
 	/**
 	 * 静态广告组件
 	 */
@@ -765,17 +780,18 @@
 
 			var playerOptions = {
 				id: "url-player-test",
-					// preload: false,
-					// "vid": this.videoData
-					// 	.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
-
 				width: '100%', //容器的大小
-					// videoWidth: '100vw', //容器的大小
-					// videoHeight: '100vh', //容器的大小
 				height: '100%', //容器的大小
-					// playsinline: true,
+				"qualitySort": "asc",
-					// controlBarVisibility: "click",
+			"format": "m3u8",
-					cover: "",
+			"mediaType": "video",
+				"cover": "",
+				"autoplay": true,
+			"isLive": false,
+			"rePlay": false,
+			"playsinline": true,
+			"controlBarVisibility": "hover",
+			"useH5Prism": true,
 				components: [
 					//  {
 					//   name: 'BulletScreenComponent',
@@ -1220,10 +1236,10 @@
 			// });
 		}
 	}
-	}
+}
 </script>
 <style>
-	.container {
+.container {
   width: 100vw;
   height: auto;
 
@@ -1231,66 +1247,66 @@
     width: 60rpx !important;
     height: 60rpx !important;
   }
-	}
+}
 
-	.fds {
+.fds {
   background-color: blue;
   height: 600rpx;
   position: fixed;
   top: 60rpx;
-	}
+}
 
-	.returnBack {
+.returnBack {
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   height: 88rpx;
   padding-left: 20rpx;
-	}
+}
 
-	.txt {
+.txt {
   color: #fff;
-	}
+}
 
-	.right_title {
+.right_title {
   background: #000;
   height: 96rpx;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
   margin-left: auto;
-	}
+}
 
-	.return {
+.return {
   flex-direction: row;
   align-items: center;
   color: #fff;
-	}
+}
 
-	.right_handle {
+.right_handle {
   width: 200rpx;
   flex-direction: row;
   justify-content: flex-end;
   padding-right: 20rpx;
-	}
+}
 
-	cover-view {
+cover-view {
   display: block;
   line-height: 1.2;
   overflow: hidden;
   white-space: nowrap;
   pointer-events: auto;
-	}
+}
 
-	cover-view {
+cover-view {
   visibility: visible !important;
-	}
+}
 
-	cover-image {
+cover-image {
   visibility: visible !important;
-	}
+}
 
-	.fullScreenButton-container {
+.fullScreenButton-container {
   color: #fff;
   float: right;
   height: 35px;
@@ -1308,12 +1324,12 @@
     margin-top: 7px;
     cursor: pointer;
 
-			&+i {
+    & + i {
       margin-left: 3px;
     }
 
     @media (min-width: 768px) {
-				&:hover+.player-tooltip {
+      &:hover + .player-tooltip {
         display: block;
       }
     }
@@ -1332,9 +1348,9 @@
       right: -12px;
     }
   }
-	}
+}
 
-	.playlist-content {
+.playlist-content {
   position: absolute;
   right: 0;
   width: 0px;
@@ -1373,9 +1389,9 @@
       }
     }
   }
-	}
+}
 
-	.player-tooltip {
+.player-tooltip {
   position: absolute;
   display: none;
   font-size: 12px;
@@ -1389,9 +1405,9 @@
   top: -48px;
   padding: 0 5px;
   white-space: nowrap;
-	}
+}
 
-	.playlist-skip-tip {
+.playlist-skip-tip {
   padding: 5px 15px;
   position: absolute;
   top: 50%;
@@ -1404,9 +1420,9 @@
   color: #000;
   text-align: center;
   transform: translate(-50%, -50%);
-	}
+}
 
-	#rotating-div {
+#rotating-div {
   width: 100vw;
   height: 100vh;
   background-color: #3498db;
@@ -1420,5 +1436,5 @@
   top: 0;
   bottom: 0;
   right: 0;
-	}
+}
 </style>