用vue封装视频预览组件（手机端）

Posted 2021-03-04 yeqrblog

最近写手机打开的h5页面时，有视频预览的需求，于是封装了一个小组件。

组件目录如下：

1.首先，showVideo.vue

<template>
    <div class="video-box" v-if="videoFlag">
        <span class="close-btn" @click="close"></span>
        <video :src="urlString" autoplay="true" controls="controls">
            您的浏览器不支持 video 标签。
        </video>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
    }
</script>
<style lang="stylus" scoped>
    .video-box
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        z-index 10
        .close-btn
            position absolute
            top .45rem
            left 0
            z-index 11
            display inline-block
            width 2.4rem
            height 2.4rem
            background url(‘../../assets/images/close_icon.png‘) center center no-repeat
            background-size contain
        video
            max-width 100%
            max-height 100%
</style>

注：close_icon.png是关闭的图片，按需替换即可。

2.接着是index.js

import Vue from ‘vue‘
import vid from ‘./showVideo‘

const videoExtend = Vue.extend(vid)

const video = (url) => {
    const videoInstance = new videoExtend({
        data: {
            urlString: url, // 视频链接地址
            videoFlag: false
        },
        created() {
            if (url) this.videoFlag = true
        },
        methods: {
            close() {
                this.videoFlag = false
            }
        }
    })
    videoInstance.vm = videoInstance.$mount()
    videoInstance.dom = videoInstance.vm.$el
    document.body.appendChild(videoInstance.dom) // 将dom插入body
}
export default {
    install: Vue => {
        Vue.prototype.$videoPreview = video
    }
}

3.在main.js入口文件中导入

import videoPreview from ‘@/components/videoPreview/index.js‘
Vue.use(videoPreview)

4.使用

methods: {
    // 视频预览
    openVideo(url) {
        this.$videoPreview(url)
    }
}

 5.效果（全屏展示）