码迷,mamicode.com
首页 > 移动开发 > 详细

用vue封装视频预览组件(手机端)

时间:2020-03-23 18:36:24      阅读:441      评论:0      收藏:0      [点我收藏+]

标签:lan   nta   auto   rip   链接地址   data   index   spl   def   

最近写手机打开的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.效果(全屏展示)

技术图片

 

用vue封装视频预览组件(手机端)

标签:lan   nta   auto   rip   链接地址   data   index   spl   def   

原文地址:https://www.cnblogs.com/yeqrblog/p/12553972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!