修改bug

h5/package.json

@@ -13,6 +13,7 @@
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "moment": "^2.29.4",
+    "vant": "^2.12.54",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1"
   },

h5/src/main.js

@@ -2,6 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementUI from 'element-ui';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+Vue.use(Vant);
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.config.productionTip = false
 Vue.use(ElementUI)

h5/src/views/extension/index.vue

 <template>
-  <div class="j-player-wrapper">
-      <j-player ref="jplay"
-        :type="playerType"
-        :prefix-url="params.prefixUrl"
-        :watermark="params.watermark"
-
-        :player-address="params.address"
-        :channel-id="params.channelId"
-
-        :datetime-range="params.datetimeRange"
-      />
-  </div>
+	<div class="extension-page">
+		<div class="j-player-wrapper">
+		    <j-player ref="jplay"
+		      :type="playerType"
+		      :prefix-url="params.prefixUrl"
+		      :watermark="params.watermark"
+		
+		      :player-address="params.address"
+		      :channel-id="params.channelId"
+		      :datetime-range="datetimeRange"
+		    />
+		</div>
+		<!-- 时间线组件 -->
+		<div class="extension-time-box">
+			<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/>
+		</div>
+	</div>
+  
 </template>
 
 <script>
 import { getUrlParams } from './utils';
 import JPlayer from '@/components/jPlayer';
-
+import videoTime from './videoTime';
+import moment from "moment";
 /**
  * 此部分负责：
  * 1. iframe通信postmessage
@@ -27,21 +34,19 @@ export default {
   name: 'JPlayerExtension',
   components: {
     JPlayer,
+		videoTime,
   },
   data() {
     return {
       playerType: 'live',
-
+			datetimeRange: [],
       params: {
         // channelId: '20000000001310000011',
         channelId: '',
         address: '52.130.155.147',
         prefixUrl: '',
         watermark: '',
-
-        // 回放参数
-        playerType: 'live',
-        datetimeRange: [],
+				
       },
     }
   },
@@ -49,6 +54,24 @@ export default {
     this.init();
   },
   methods: {
+		// 时间线改变
+		videoTimeChange(val) {
+			this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback';
+			if(this.playerType == 'playback'){
+				this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()]
+			}
+		},
+		// 云台控制
+		ptzControlClick(type) {
+			console.log(type)
+			// this.$refs.jplay.ptzController(type);
+		},
+		// 云台控制结束
+		ptzControlStop() {
+			// this.$refs.jplay.ptzController('stop');
+		},
+		
+		
     init() {
       // 通过URL获取相关参数
       const urlParamsMap = getUrlParams(window.location.hash);
@@ -78,8 +101,8 @@ export default {
 
 <style lang="scss" scoped>
 .j-player-wrapper {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 56vw;
   overflow: hidden;
 }
 </style>

h5/src/views/pc/index.vue

@@ -87,20 +87,12 @@
 <script>
 import videoTime from './videoTime.vue'
 import jPlayer from '@/components/jPlayer';
-// import jPlayer0 from '../jPlayer/index.vue'
-// import jPlayer1 from '../jPlayer/index.vue'
-// import jPlayer2 from '../jPlayer/index.vue'
-// import jPlayer3 from '../jPlayer/index.vue'
 import moment from 'moment'
 export default {
 	name: 'JPlayerWeb',
 	components:{
 		videoTime,
 		jPlayer,
-		// jPlayer0,
-		// jPlayer1,
-		// jPlayer2,
-		// jPlayer3
 	},
 	data() {
 		return {
@@ -153,9 +145,10 @@ export default {
 			}
 	},
 	mounted() {
+		window.playWebVideo = this.playWebVideo;
 	},
 	methods: {
-		init(obj) {
+		playWebVideo(obj) {
 			if (!obj.address || !obj.channelId) {
 				console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
 				return false

h5/src/views/pc/pcdemo.vue

@@ -5,15 +5,16 @@
         <el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频一</el-button>
         <el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频二</el-button>
       </div>
-      <indexPlayer ref="indexPlayer" />
+			<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://localhost:9091/#/jplayer-web" frameborder="0"></iframe>
+			<!-- <iframe name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.117:8080/" frameborder="0"></iframe> -->
   </div>
 </template>
 <script>
-import indexPlayer from './index.vue';
+// import indexPlayer from './index.vue';
 export default {
   name: 'jplayerWebDemo',
   components: {
-    indexPlayer,
+    // indexPlayer,
   },
   data() {
     return {
@@ -23,7 +24,9 @@ export default {
   },
   methods: {
     addPlayer(obj) {
-      this.$refs.indexPlayer.init(obj);
+			// window.playWebVideo(obj)
+			window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
+      // document.getElementById('iframe').contentWindow.playWebVideo(obj);
     },
   },
 }

h5/src/views/pc/videoTime.vue

@@ -118,8 +118,6 @@ export default {
 			isNoBack:true,
 			
 			isFullScreen:false,
-			screenImgTotal:0,
-			screenImgList:[],
 			mouseMoveTime:'',
 			isMouseMove:false,
 			mouseMoveTimeFocus:false,