feat():视屏监控

pages/hdDetail/hdDetail.vue

@@ -68,6 +68,7 @@
 
 <style lang="scss" scoped>
   .rain-detail-box{
+    position: relative;
     .nav-bar{
       display: flex;
       justify-content: center;

pages/hdDetail/spjk/spjk.vue

@@ -11,7 +11,7 @@
     </view>
     <view class="video-box" v-if="this.list.length">
       <!-- <web-view :src="webURL" style="height: 400px;"></web-view> -->
-      <iframe :src="webURL" style="height: 300px;width:380px" frameborder="0" :allowfullscreen="true"></iframe>
+      <iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
     </view>
   </view>
 </template>
@@ -27,9 +27,13 @@
         value: "",
         list:[],
         webURL:'',
+        show:0
       }
     },
     methods: {
+      receiveRenderData(e){
+         this.show = e.data
+      			},
       async getList(){
         try{
           const {data} = await uni.$http.get(
@@ -72,10 +76,52 @@
   }
 </script>
 
+<script module="renderModal" lang="renderjs">
+  export default {
+    data() {
+			return {
+				dom: '',
+			}
+		},
+    mounted() {
+			this.dom = document.getElementById('iframe')
+			// 接收iframe传过来的值
+			window.addEventListener('message', (e)=> {
+				var data = e.data;
+				this.emitData(data) 
+			});
+		},
+    methods: {
+      emitData(e) {
+        this.$ownerInstance.callMethod('receiveRenderData',e)
+      },
+  },
+  }
+</script>
+
 <style lang="scss" scoped>
   .spjk-box{
     .select-bar{
       margin: 10px 15px;
     }
+    .video-box{
+      
+    .normal{
+      position: absolute;
+      // width: 370px;
+      // height: 300px;
+      top: 170px;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    .active{
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
+      top: -30px;
+      left: 0;
+    }
+    }
   }
 </style>

pages/skDetail/spjk/spjk.vue

@@ -10,7 +10,7 @@
         </uni-data-select>
     </view>
     <view class="video-box" >
-      <iframe :src="webURL" style="height: 300px;width:370px;" frameborder="0" ref="videoFrame"></iframe>
+      <iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
     </view>
     <!-- <u-overlay :show="show" @click="show = false">
 		<view class="warp" style="position:relative;">
@@ -20,7 +20,7 @@
       </view>
 		</view>
 	</u-overlay> -->
-    <!-- <button @click="show=true">全屏</button> -->
+    <!-- <button @click="handler">全屏</button> -->
   </view>
 </template>
 
@@ -36,13 +36,15 @@
         value: "",
         list:[],
         webURL:'',
-        show:false
+        show:0
       }
     },
     methods: {
-      // handleMessage(){
-      //   console.log(111111111111111);
-      // },
+     receiveRenderData(e){
+				//接收的值
+				console.log("3333",e.data)
+        this.show = e.data
+			},
       async getList(){
         try{
           const {data} = await uni.$http.get(
@@ -75,14 +77,29 @@
     },
     mounted() {
       this.getList()
-    //     // 监听退出全屏事件，恢复竖屏模式
-    // document.addEventListener('fullscreenchange', this.exitFullScreen);
-    // document.addEventListener('webkitfullscreenchange', this.exitFullScreen);
-    // document.addEventListener('mozfullscreenchange', this.exitFullScreen);
-    // document.addEventListener('MSFullscreenChange', this.exitFullScreen);
     },
-     onLoad() {
-    window.addEventListener('message', (e)=>{console.log("eeee",e);});
+  }
+</script>
+
+<script module="renderModal" lang="renderjs">
+  export default {
+    data() {
+			return {
+				dom: '',
+			}
+		},
+    mounted() {
+			this.dom = document.getElementById('iframe')
+			// 接收iframe传过来的值
+			window.addEventListener('message', (e)=> {
+				var data = e.data;
+				this.emitData(data) 
+			});
+		},
+    methods: {
+      emitData(e) {
+        this.$ownerInstance.callMethod('receiveRenderData',e)
+      },
   },
   }
 </script>
@@ -92,5 +109,23 @@
     .select-bar{
       margin: 10px 15px;
     }
+    .video-box{
+      .normal{
+        position: absolute;
+        // width: 370px;
+        // height: 300px;
+        top: 170px;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+      .active{
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        top: -30px;
+        left: 0;
+      }
+    }
   }
 </style>

static/h5Player/webplayer.html

@@ -70,8 +70,12 @@
         myPlugin.JS_SetWindowControlCallback({
             windowFullCcreenChange: function (bFull) {  //全屏切换回调
                 console.log('fullScreen callback: ', bFull);
-                window.parent.postMessage("childLoaded", "*");
+                let info = {
+	               data:bFull ? 1 : 0
+	            }
+                window.parent.postMessage(info, '*');
             },
+
         })
         // wholeFullScreen()