EveryLike/pages/API/choose-media/fullscreen-video.uvue

<template>
  <view style="flex:1">
    <view ref="back" @click="back" class="nav-back">
      <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
    </view>
    <video ref="video" class="video-box" :src="url" controls="false" autoplay="true" show-progress="false"
      show-fullscreen-btn="false" show-play-btn="false" show-center-play-btn="false"></video>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: "",
        coverPath: ""
      }
    },
    onLoad(options : OnLoadOptions) {
      uni.$once("__ONRECEIVEURL",(value:UTSJSONObject)=>{
        this.url = value["url"] as string;
        this.coverPath = value["cover"] as string;
      })
      uni.$emit("__ONFULLVIDEOLOAD",null)
    },
    methods: {
      back() {
        uni.navigateBack()
      }
    }
  }
</script>

<style>
  .nav-back {
      position: absolute;
  /* #ifdef APP */
      top: 35px;
  /* #endif */
      background-color: rgba(220, 220, 220, 0.8);
      border-radius: 100px;
      margin: 6px;
      width: 32px;
      height: 32px;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
  .nav-back .back-img {
    width: 18px;
    height: 18px;
  }

  .video-box {
    width: 100%;
    flex: 1;
    height: 100%;
  }
</style>