zc

src/App.vue

@@ -50,7 +50,7 @@
                 // type 1.楼栋 2.楼层 3.楼道 4.实验室
                 let obj = {
                     page:'1',
-                    pageSize:'2',
+                    pageSize:'4',
                 };
                 if(urlData.type == 1){
                     obj.buildId = urlData.id;
@@ -131,7 +131,6 @@
         line-height:80px;
     }
     .video-max-box {
-        background: red;
         overflow: hidden;
         padding-top:10px;
     }

src/components/H5PlayerVideo.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="H5PlayerVideo">
         <div :id="videoData.id" :ref="videoData.id"></div>
-        <!--<p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>-->
+        <p class="full-screen-button" v-if="!fullScreenType" @click="fullScreen"></p>
+        <p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>
     </div>
 </template>
 
@@ -13,6 +14,7 @@
         },
         data() {
             return {
+                fullScreenType:false,
                 videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
                 videoData: {},
             }
@@ -32,6 +34,36 @@
             })
         },
         methods: {
+            //全屏
+            fullScreen() {
+                let self = this;
+                this.myPlugin.JS_FullScreenDisplay(true).then(
+                    (res) => {
+                        console.info('JS_FullScreenDisplay success');
+                        // do you want...
+                    },
+                    (err) => {
+                        console.info('JS_FullScreenDisplay failed');
+                        // do you want...
+                    }
+                );
+                self.$set(self,'fullScreenType',true);
+            },
+            //退出全屏
+            outFullScreen() {
+                let self = this;
+                this.myPlugin.JS_FullScreenDisplay(false).then(
+                    (res) => {
+                        console.info('JS_FullScreenDisplay success');
+                        // do you want...
+                    },
+                    (err) => {
+                        console.info('JS_FullScreenDisplay failed');
+                        // do you want...
+                    }
+                );
+                self.$set(self,'fullScreenType',false);
+            },
             initH5Player(split) {
                 this.myPlugin = new window.JSPlugin({
                     szId: this.videoData.id, //需要英文字母开头，唯一性，必填
@@ -146,7 +178,8 @@
     }
 
     .full-screen-button {
-        color: #fff;
+        background: url("../assets/icon_0.png");
+        background-size: 100%;
         position: absolute;
         font-size: 20px;
         height: 30px;
@@ -155,7 +188,21 @@
         text-align: center;
         top: 0;
         right: 0;
-        z-index: 1;
+        z-index: 999;
+        cursor: pointer;
+    }
+    .full-failed-button {
+        background: url("../assets/icon_1.png");
+        background-size: 100%;
+        position: fixed;
+        font-size: 20px;
+        height: 30px;
+        width: 30px;
+        line-height: 30px;
+        text-align: center;
+        bottom: 0;
+        right: 0;
+        z-index: 999999;
         cursor: pointer;
     }