play-video-app/components/video-player/video-player.vue

<template>
    <view class="videoPlayer">
        <video :id="videoId" ref="myVideo" class="video" height="100%" :autoplay="autoplay" :initial-time="initialTime" :loop="true" :src="videoUrl" :show-center-play-btn="false" :enable-play-gesture="true" :controls="controls" :vslide-gesture="true" :show-play-btn="false" @controlstoggle="controlstoggle($event)" @timeupdate="updateProgress" @play="play" @pause="pause" @fullscreenchange="onFullscreenChange" @click="togglePlay"></video>
        <view v-if="isPlay" class="play" @click="togglePlay"><image :src="imgsrc"></image></view>
    </view>
</template>

<script>
	import defaultConfig from '@/config/default.js'
export default {
    props:{
        videoUrl: String,
        videoId: String,
        autoplay: {
            type: Boolean,
            default: true
        },
        initialTime:{
            type: [ String,Number ],
            default: ''
        },
        selanShow:{
            type: Boolean,
            default: true
        }
    },
    data(){
        return{
            progress: 0, // 进度条进度
            isPlay:null,
            controls: true,
            isFullscreen: null,
            imgsrc:defaultConfig.ossImgUrl + '/playVideo/video/ic_play.png',
        }
    },
    onReady: function(res){
        console.log(res,8989);
    },
    watch:{
    },
    methods: {
        // 播放 &暂停
        togglePlay() {
            
            var video = this.$refs.myVideo;
            if (video.playing) {
                // this.isPlay = true
                video.pause();
            } else {
                // this.isPlay = false
                video.play();
            }

        },


        // 控制播放按钮
        controlstoggle(event){
            console.log(event,'event');
            this.controls = !this.controls
        },


        updateProgress(event) {  
            // 通过自定义事件传递当前时间
            this.$emit('timeUpdate', event.target.currentTime);
        },  
        // 当开始/继续播放时触发play事件
        play() {  
            
            this.isPlay = false
            // uni.createVideoContext('myVideo',this).play()
            // console.log(uni.createVideoContext('videoId').pageVm,'pla2y');
            // this.$refs.progressBar.style.display = 'block';  2
        },  
        // 当暂停播放时触发 pause 事件
        pause() {  
            this.isPlay = true
            // uni.createVideoContext('myVideo',this).pause()
            // console.log(uni.createVideoContext('videoId').pageVm,'pease');
            // const video = this.$refs.video;  
            // if (video.currentTime === video.duration) {  
            //     this.$refs.progressBar.style.display = 'none';  
            // }  
        },  
        onFullscreenChange(event){
            this.isFullscreen = event.detail.fullScreen;
            if(this.isFullscreen){
                this.$emit('chectSelanShow',false)
            }else{
                this.$emit('chectSelanShow',true)
            }
            console.log(event,this.isFullscreen,'ff你看');
        }
    },
    mounted(){
        this.isFullscreen = uni.createVideoContext('myVideo')
        setTimeout(() => {
            console.log(99);
            // this.togglePlay()
        })
        
        
        // this.$refs.video.addEventListener('loadedmetadata', () => {
        //     this.updateProgress(); // 初始化时设置进度为0%  
        // });  
    }
}
</script>

<style lang="scss">
    .videoPlayer{
        width: 100%;
        height: 100vh;
        position: relative;
        .video{
            width: 100%;
            height: 100%;
        }
        video::-webkit-media-controls-timeline{
            display: none;
        }
        .uni-video-bar .uni-video-bar-full{
            margin-bottom: calc(100rpx + constant(safe-area-inset-bottom)) !important;
            margin-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
        }
        .play{
            width: 204rpx;
            height: 204rpx;
            position: absolute;
            left: calc(50% - 102rpx);
            bottom: 204rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    
</style>