聊天

pageD/components/GoEasyVideoPlayer/GoEasyVideoPlayer.vue

@@ -0,0 +1,55 @@
+<template>
+    <video
+            v-if="show"
+            class="video-player"
+            controls = ""
+            @play="onPlayStart"
+            id="videoPlayer"
+            autoplay="true"
+            @fullscreenchange="onVideoFullScreenChange"
+            :src="url">
+    </video>
+</template>
+
+<script>
+    export default {
+        name: "GoEasyVideoPlayer",
+        data () {
+            return {
+                show : false,
+                context: null,
+                url: ''
+            }
+        },
+        methods : {
+            play (video) {
+                this.show = true;
+                this.url = video.url;
+                this.context = uni.createVideoContext('videoPlayer');
+            },
+            onVideoFullScreenChange (e) {
+                //当退出全屏播放时，隐藏播放器
+                if(this.show && !e.detail.fullScreen){
+                    this.show = false;
+                    this.context.stop();
+                }
+            },
+            onPlayStart () {
+                //播放开始时，立即全屏
+                this.context.requestFullScreen({
+                    direction : 0
+                });
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .video-player{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+</style>