视频播放器

本文介绍了一款视频播放器在vue中使用及示例。

chimee 项目地址

chimee支持flv，直播，弹幕等多种功能 具体可去官方查看文档

附上代码：

个人在vue项目中使用此插件封装了组件作为项目中视频播放，主要是解决video标签无法播放flv的问题；

代码

<template>
    <div id="wrapper" :style="{height: `${height}px`}"></div>
</template>
<script>
/**
自定义视频播放器 支持Flv格式
videoUrl： 要播放到视频路径
height： 播放器高度， 默认宽度100% 高度 500px
autoplay: 是否自动播放
 */
import Chimee from 'chimee';
import flv from 'chimee-kernel-flv'
export default {
    name: 'videoPlayer',
    props:{
        videoUrl:String,
        height:{ 
            type:[String,Number], 
            default: 500
        },
        autoplay: {
            type: Boolean,
            default: true,
        }
    },
    methods:{
        createPlayer(){
            if(!this.videoUrl)return;
            let _this = this;
            const chimee = new Chimee({
                wrapper: '#wrapper',
                src: _this.videoUrl,
                controls: true,
                autoplay: _this.autoplay,
                kernels: {
                    flv
                }
            })
        }
    },
    mounted(){
        this.createPlayer();
    }
}
</script>