video.vue

<template>
  <view v-if="url" class="video-box" :class="{'is-float-mode':mode == 'float'}">
    <view class="mask" v-if="mode == 'float'"></view>
  	<video @click="showCloseBtnFn" :src="url" :autoplay="true" :page-gesture="true" :show-mute-btn="true" :show-fullscreen-btn="mode == 'float'" class="video"></video>
  	<uni-icons v-if="showCloseBtn" @click="close" size="30px" color="#FFFFFF" type="closeempty" class="close-icon"></uni-icons>
  </view>
</template>

<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				url:"",
				showCloseBtn:true,
        // 全屏模式和小窗模式，fullscreen为全屏模式，float为小窗模式
        mode: 'fullscreen',
			};
		},
		onLoad({url}) {
			// console.log({url});
			this.url = url
			setTimeout(()=> {
				this.showCloseBtn = false
			}, 1000);
		},
    mounted(){
      // console.log('mounted');
      uni.$on('uni-im-playVideo',(url)=>{
        this.mode = 'float'
        this.url = url
        this.showCloseBtn = true
      })
      
      // 监听esc按键，关闭视频
      // #ifdef H5
      uniIm.utils.appEvent.onKeyDown(evt => this.onDownEscapeKey, {
        order: 1000,
        match: {
          key: 'Escape',
          altKey: false,
          ctrlKey: false,
          shiftKey: false,
        }
      })
      // #endif
    },
    beforeDestroy(){
      // #ifdef H5
      uniIm.utils.appEvent.offKeyDown(this.onDownEscapeKey)
      // #endif
    },
		methods:{
      onDownEscapeKey() {
        if (this.url.length) {
          this.close()
        }
        return true
      },
			close(){
        if(this.mode == 'fullscreen'){
          uni.navigateBack()
        }else{
          this.url = ''
        }
			},
			showCloseBtnFn(){
				// console.log('showCloseBtnFn');
				this.showCloseBtn = true
        if(this.mode == 'fullscreen'){
          setTimeout(()=> {
          	this.showCloseBtn = false
          }, 5000);
        }
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
page {
  height: 100%;
}
.video-box,.video{
	width: 100vw;
  height: 100%;
}
.close-icon{
	position: absolute;
	top: 80rpx;
	left: 30rpx;
	z-index: 10;
	text-shadow: 0 0 15px black;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}
.is-float-mode,
.is-float-mode .video{
	position: fixed;
	top: 10vh;
  left: calc(10vw + 250px);
  width: calc(80vw - 220px) !important;
  height: 80vh !important;
  z-index: 9;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
</style>