非常好用的 HTML5 视频播放插件

介绍

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。播放器的设计兼容了在 PC、Mobile 端运行，提供了 “移动端” 以及 “PC端” 两类扩展插件，因此你也可应用于在 Android、Ios 的 Webview 中使用。

安装 

npm i mui-player --save

 使用

// 引入
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

// 定义播放器容器
<div id="mui-player"></div>

// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'标题',
    src:'./static/media/media.mp4',
})

主要配置

 完整代码

<template>
    <div class="videoPlayer">
        <div id="mui-player"></div>
    </div>
</template>

<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
export default {
    name: 'videoPlayer',
    data() {
        return {
            videoUrl: 'test.mp4'
        }
    },
    mounted() {
        this.initPlayer();
    },
    methods: {
        initPlayer() {
            const that = this;
            // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
            let mp = new MuiPlayer({
                container: '#mui-player',   // 指定播放器容器
                title: '课程标题',  // 标题
                src: that.videoUrl, // 视频播放的资源地址
                muted: false, // 是否静音
                autoplay: true, // 是否自动播放
                initFullFixed: true, // 初始化全屏
            })
            // 监听播放器已创建完成
            mp.on('back', function (event) {
                that.$router.go(-1);
            });
        }
    }
}
</script>

<style lang="less" scoped>
.videoPlayer {
    width: 100%;
    height: 100%;
}
</style>

想了解更多请移步官方文档：API | MuiPlayer