Video标签自定义简易视频播放器

Video标签自定义简易视频播放器

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Dom结构

<template>
    <el-dialog :title="winTitle" :close-on-click-modal="false" :visible="dialogVisible" width="44%"
               @close="cancel">
        <div class="main-content">
            <header class="header-content" style="background: #0F6668;">
                <span style="margin-left: 10px">{{ rowData.cameraName }}</span>
                <i class="el-icon-full-screen" style="float: right; cursor: pointer; line-height: inherit; margin-right: 10px" @click="fullScreen"></i>
            </header>
            <div class="video-content">
                <video ref="video" :src="rowData.filePath" preload="auto" style="width: 100%; height: 100%" @canplay="getVideo" @timeupdate="updateProgress"></video>
            </div>
            <footer class="footer-content">
                <div class="footer-div" style="width: 40px; height: 40px">
                    <span :class="[isPause ? 'el-icon-video-play' : 'el-icon-video-pause']" style="font-size: 40px; cursor: pointer" @click="start(isPause)"></span>
                </div>
                <div>
                    <span style="display: inline-block; width: 16px; height: 16px; cursor: pointer; background-color: #BF2613" @click="reStart"></span>
                </div>
                <div class="footer-div">
                    <span class="el-icon-caret-left caret-span" @click="goBack"></span>
                    <span style="vertical-align: super">{{ timeTitle }}</span>
                    <span class="el-icon-caret-right caret-span" @click="goFront"></span>
                </div>
                <div class="footer-div progress">
                    <el-slider v-model="percent"
                               :show-tooltip="false"
                               @change="changePercent"
                               @mousedown.native="progressState = true"
                               @mouseup.native="progressState = false"></el-slider>
                </div>
                <div class="footer-div">
                    <span> {{ currentTime }} </span> /
                    <span> {{ duration }} </span>
                </div>
            </footer>

        </div>

    </el-dialog>
</template>

二、JS

<script>
    export default {
        name: 'VideoFileWindow',
        props: ['winTitle', 'dialogVisible', 'rowData'],
        data() {
            return {
                isPause: true,
                duration: '00:00:00',
                currentTime: '00:00:00',
                timeTitle: '',
                percent: 0,
                progressState: false
            }
        },
        computed: {
        },
        mounted() {
        },
        methods: {
            /**
             * 全屏
             * */
            fullScreen() {
                let el = this.$refs.video;
                if (el.requestFullscreen) {
                    el.requestFullscreen();
                } else if (el.msRequestFullscreen) {
                    el.msRequestFullscreen();
                } else if (el.mozRequestFullScreen) {
                    el.mozRequestFullScreen();
                } else if (el.webkitRequestFullscreen) {
                    el.webkitRequestFullscreen();
                } else {
                    console.log('不支持全屏!');
                }
            },
            /**
             * 开始/暂停
             * */
            start(flag) {
                let video = this.$refs.video;
                flag ? video.play() : video.pause();
                this.isPause = !flag;
            },
            /**
             * 重播
             * */
            reStart() {
                let video = this.$refs.video;
                video.currentTime = 0;
                video.pause();
                this.isPause = true;
            },
            /**
             * 快进
             * */
            goFront() {
                let video = this.$refs.video;
                video.currentTime += 10;
                this.timeTitle = '快进10S';
            },
            /**
             * 快退
             * */
            goBack() {
                let video = this.$refs.video;
                video.currentTime -= 10;
                this.timeTitle = '快退10S';
            },
            /**
             * 视频加载完成
             * */
            getVideo() {
                this.duration = this.timeFormat(this.$refs.video.duration);
            },
            /**
             *视频进度更新
             * */
            updateProgress() {
                if (!this.progressState) {
                    let current = this.$refs.video.currentTime;
                    let total = this.$refs.video.duration;
                    this.currentTime = this.timeFormat(this.$refs.video.currentTime);
                    this.percent = current / total * 100;
                    current === total ? this.isPause = true : '';
                }
            },
            /**
             * 拖动进度条
             * */
            changePercent(data) {
                let total = this.$refs.video.duration;
                this.$refs.video.currentTime = total * data / 100;
            },
            /**
             * 取消操作
             * */
            cancel() {
                this.$emit('closeWin');
            },
            /**
             * 秒数转换为时分秒
             * @param time
             * @returns {string}
             */
            timeFormat(time) {
                // 转换为式分秒
                let h = parseInt(time / 60 / 60 % 24)
                h = h < 10 ? '0' + h : h
                let m = parseInt(time / 60 % 60)
                m = m < 10 ? '0' + m : m
                let s = parseInt(time % 60)
                s = s < 10 ? '0' + s : s
                // 作为返回值返回
                return h + ':' + m + ':' + s;
            }
        }
    }
</script>

三、CSS

<style scoped>
    .main-content {
        background: #000000;
        border: 1px solid #196C71;
        height: 100%;
    }

    .header-content {
        height: 34px;
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #62FCFA;
        line-height: 37px;
    }

    .video-content {
        width: 100%;
        height: calc(90% - 34px);
    }

    .footer-content {
        width: 100%;
        height: 10%;
        background: #14738A;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .footer-div {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 36px;
    }

    .caret-span {
        cursor: pointer;
        font-size: 30px;
    }

    .progress {
        width: 40%;
    }

    ::v-deep .el-slider__bar {
        height: 15px;
        background: #59FF74;
        border-radius: 8px;
    }

    ::v-deep .el-slider__runway {
        height: 15px;
        background: #FFFFFF;
        border-radius: 8px;
    }

    ::v-deep .el-slider__button {
        transform: translateY(4px);
        background: #FFFFFF;
        border: 5px solid #59FF74;
        border-radius: 50%;
    }

</style>