Vue 自定义控制视频播放器

 

// 获取视频对象

        getVideoEl() {

            let video = this.videoEl = this.$el.querySelector('video')

            this.currentTime = this.videoEl.currentTime



            video.addEventListener('loadeddata', () => {

                console.log('视频已经加载完成，时长为：' + video.duration + '秒');

                this.duration = video.duration

                this.videoLoading = false

            });

            video.addEventListener('play', () => {

                console.log('视频已经开始播放');

                this.paused = false

            });

            video.addEventListener('pause', () => {

                console.log('视频已经暂停');

                this.paused = true

            });

            video.addEventListener('ended', () => {

                console.log('视频已经播放完毕');

                this.paused = true

            });



            video.addEventListener('timeupdate', (e) => {

                if (this.sliderFlag) return

                this.currentTime = video.currentTime

                this.progress = video.currentTime / this.duration * 100;  // 计算播放进度百分比

            });

        },

        // 处理播放暂停事件

        handlePlay() {

            this.videoEl[this.paused ? 'play' : 'pause']()

        },

        // 处理静音

        handleMuted() {

            this.videoEl.muted = this.muted = !this.muted

        },
        // 处理自定义全屏
        handleFullScreen() {

            let video = this.$el.querySelector('.secure-video-box')

            if (document.fullscreenElement === video) {

                let arr = ['exitFullscreen', 'webkitExitFullscreen', 'msExitFullscreen']

                let method = arr.find(item => document[item])

                method && document[method]()

                this.isScreen = false

            } else {

                let arr = ['requestFullscreen', 'webkitRequestFullscreen', 'msRequestFullscreen']

                let method = arr.find(item => video[item])

                method && video[method]()

                this.isScreen = true

            }

        },
        // 格式化时分秒

        formatVideoTime(seconds) {

            const hours = Math.floor(seconds / 3600);

            const minutes = Math.floor((seconds - hours * 3600) / 60);

            const remainingSeconds = parseInt(seconds - hours * 3600 - minutes * 60);



            const hoursString = hours.toString().padStart(2, '0');

            const minutesString = minutes.toString().padStart(2, '0');

            const secondsString = remainingSeconds.toString().padStart(2, '0');



            return `${hoursString}:${minutesString}:${secondsString}`;

        },
        // 拖动播放进度

        handleDrag(e) {

            this.videoEl.currentTime = e

            this.videoEl.play()

        },