sync：修复app端video层级过高问题 839a01f8b5

sheep/ui/su-video/components/dom-video.vue

@@ -0,0 +1,213 @@
+<!-- eslint-disable -->
+<template>
+  <view
+    v-html="videoHtml"
+    id="dom-video"
+    class="dom-video"
+    :eventDrive="eventDrive"
+    :change:eventDrive="domVideo.eventHandle"
+    :videoSrc="videoSrc"
+    :change:videoSrc="domVideo.srcChange"
+    :videoProps="videoProps"
+    :change:videoProps="domVideo.propsChange"
+    :randomNum="randomNum"
+    :change:randomNum="domVideo.randomNumChange"
+  />
+</template>
+
+<script>
+  export default {
+    props: {
+      src: {
+        type: String,
+        default: '',
+      },
+      autoplay: {
+        type: Boolean,
+        default: false,
+      },
+      loop: {
+        type: Boolean,
+        default: false,
+      },
+      controls: {
+        type: Boolean,
+        default: false,
+      },
+      objectFit: {
+        type: String,
+        default: 'contain',
+      },
+      muted: {
+        type: Boolean,
+        default: false,
+      },
+      poster: {
+        type: String,
+        default: '',
+      },
+    },
+
+    // 数据状态
+    data() {
+      return {
+        videoHtml: '',
+        videoSrc: '',
+        eventDrive: null,
+        videoProps: {},
+        randomNum: Math.floor(Math.random() * 100000000 + 1),
+      };
+    },
+    watch: {
+      // 监听视频资源文件更新
+      src: {
+        handler(val) {
+          if (!val) return;
+          this.initVideoHtml();
+          setTimeout(() => {
+            this.videoSrc = val;
+          }, 0);
+        },
+        immediate: true,
+      },
+      // 监听首次加载
+      autoplay: {
+        handler(val) {
+          this.videoProps.autoplay = val;
+        },
+        immediate: true,
+      },
+    },
+    // 生命周期
+    mounted() {
+      this.initVideoHtml();
+    },
+
+    // 方法
+    methods: {
+      // 将video的事件传递给父组件
+      videoEvent(data) {
+        // console.log('向父组件传递事件 =>', data)
+        this.$emit(data);
+      },
+      // 初始化视频
+      initVideoHtml() {
+        this.videoHtml = `<video
+          src="${this.src}"
+          id="dom-html-video_${this.randomNum}"
+          class="dom-html-video"
+          ${this.autoplay ? 'autoplay' : ''}
+          ${this.loop ? 'loop' : ''}
+          ${this.controls ? 'controls' : ''}
+          ${this.muted ? 'muted' : ''}
+          ${this.poster ? 'poster="' + this.poster + '"' : ''}
+          preload="auto"
+          playsinline
+          webkit-playsinline
+          width="100%"
+          height="100%"
+          style="object-fit: ${this.objectFit};padding:0;"
+        >
+          <source src="${this.src}" type="video/mp4">
+          <source src="${this.src}" type="video/ogg">
+          <source src="${this.src}" type="video/webm">
+        </video>
+      `;
+        // console.log('视频html =>', this.videoHtml)
+      },
+      resetEventDrive() {
+        this.eventDrive = null;
+      },
+      // 将service层的事件/数据 => 传递给renderjs层
+      play() {
+        this.eventDrive = 'play';
+      },
+      pause() {
+        this.eventDrive = 'pause';
+      },
+      stop() {
+        this.eventDrive = 'stop';
+      },
+    },
+  };
+</script>
+
+<script module="domVideo" lang="renderjs">
+  export default {
+    data() {
+      return {
+        video: null,
+        num: '',
+        options: {}
+      }
+    },
+    mounted() {
+      this.initVideoEvent()
+    },
+    methods: {
+      initVideoEvent() {
+        setTimeout(() => {
+          let video = document.getElementById(`dom-html-video_${this.num}`)
+          this.video = video
+
+          // 监听视频事件
+          video.addEventListener('play', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'play')
+          })
+          video.addEventListener('pause', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'pause')
+          })
+          video.addEventListener('ended', () => {
+            this.$ownerInstance.callMethod('videoEvent', 'ended')
+            this.$ownerInstance.callMethod('resetEventDrive')
+          })
+        }, 100)
+      },
+      eventHandle(eventType) {
+        if (eventType) {
+          this.video = document.getElementById(`dom-html-video_${this.num}`)
+
+          if (eventType === 'play') {
+            this.video.play()
+          } else if (eventType === 'pause') {
+            this.video.pause()
+          } else if (eventType === 'stop') {
+            this.video.stop()
+          }
+        }
+      },
+      srcChange(val) {
+        // 实现视频的第一帧作为封面，避免视频展示黑屏
+        this.initVideoEvent()
+        setTimeout(() => {
+          let video = document.getElementById(`dom-html-video_${this.num}`)
+
+          video.addEventListener('loadedmetadata', () => {
+            let { autoplay } = this.options
+            video.play()
+            if (!autoplay) {
+              video.pause()
+            }
+          })
+        }, 0)
+      },
+      propsChange(obj) {
+        this.options = obj
+      },
+      randomNumChange(val) {
+        this.num = val
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dom-video {
+    overflow: hidden;
+    height: 100%;
+    padding: 0;
+    &-height {
+      height: 100%;
+    }
+  }
+</style>

sheep/ui/su-video/su-video.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="ui-video-wrap">
+    <!-- #ifndef APP-PLUS -->
     <video
       :id="`sVideo${uid}`"
       class="radius"
@@ -18,12 +19,38 @@
       @pause="pause"
       @ended="end"
       :poster="poster"
-      :autoplay="autoplay"
     >
-      <!-- #ifdef APP-PLUS -->
-      <cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
-      <!-- #endif -->
     </video>
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS -->
+    <dom-video
+      ref="domVideo"
+      class="radius"
+      :style="[{ height: height + 'rpx' }]"
+      object-fit="contain"
+      :controls="true"
+      :show-progress="false"
+      :show-fullscreen-btn="false"
+      :show-play-btn="false"
+      :show-bottom-progress="false"
+      :autoplay="false"
+      :src="src"
+      @play="play"
+      @pause="pause"
+      @ended="end"
+    />
+    <!-- #endif -->
+    <!-- <view
+      v-show="!state.isplay"
+      class="poster-wrap radius"
+      :style="{ height: height + 'px' }"
+      @click="beforePlay"
+    >
+      <image class="poster-image" mode="aspectFill" :src="poster" v-if="poster" />
+      <view class="play-icon ss-flex ss-row-center ss-col-center">
+        <text class="cicon-play-arrow ss-font-40"></text>
+      </view>
+    </view> -->
   </view>
 </template>
 <script setup>
@@ -43,6 +70,7 @@
    */
 
   import { reactive, nextTick, getCurrentInstance } from 'vue';
+  import DomVideo from './components/dom-video.vue';
   import sheep from '@/sheep';
   const vm = getCurrentInstance();
 
@@ -81,7 +109,7 @@
     // 指定视频初始播放位置，单位为秒（s）
     initialTime: {
       type: Number,
-      default: 1,
+      default: 0,
     },
     src: {
       type: String,
@@ -91,10 +119,6 @@
       type: String,
       default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
     },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    }
   });
 
   // 事件
@@ -137,6 +161,7 @@
   const beforePlay = () => {
     uni.getNetworkType({
       success: (res) => {
+        console.log(res.networkType, 'res.networkType');
         const networkType = res.networkType;
         // if (networkType === 'wifi' || networkType === 'ethernet') {
         //   startPlay();
@@ -169,6 +194,7 @@
   .radius {
     width: 100%;
   }
+
   .ui-video-wrap {
     display: flex;
     align-items: center;