vue + mui-player视频播放器

安装
使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

#使用
1、使用 script 标签引入：

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/><!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script><!-- 指定播放器容器 -->
<div id="mui-player"></div>

或者使用模块管理器在main.js引入：

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

2、定义播放器容器：

<div id="mui-player"></div>

3、初始化构建播放器：

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

以上就能为初始化构建一个具有默认配置控件的视频播放器，注意这里的容器ID是唯一。

定义通用组件mui-video.vue

<template><div id="mui-player" />
</template><script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
export default {props: {src: {type: String,default: ''},title: {type: String,default: ''}},data() {return {}},mounted() {var mp = new MuiPlayer({container: '#mui-player',title: this.title,src: this.src})// 音量调节时触发mp.on('volume-change', function(e) {mp.video().volume = e.size;});},methods: {}
}
</script><style lang="scss" scoped></style>

在components中全局注册

import muiVideo from '@/components/mui-video/mui-video.vue'
const cmsComponents = {install: function (Vue) {Vue.component('muiVideo', muiVideo)}
}

在页面中调用

<mui-video:src="videoSrc":title="videoTitle"/>

vue + mui-player视频播放器相关推荐

vue引入video视频播放器（视频调用代码范例）
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
在Vue中自制视频播放器（上）
在Vue中自制视频播放器(上) 前言初始化组件开始/暂停按钮停止按钮静音按钮视频播放时间全屏按钮源代码前言平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览 ...
vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
Mine Video Player – 视频播放器WordPress插件
介绍: 轻松实现视频在wp页面播放,支持剧集列表,支持多组视频来源,这款视频播放器WordPress插件支持m3u8/mp4等网页视频格式,同时支持直播源,也可将主流视频站的视频通过第三方程序来播放, ...
vue项目使用视频播放器vue-video-player
安装使用插件有版本限制,如果项目使用的是vue2.0版本,请选择安装@4.x版本,否则会安装不成功: yarn add vue-video-palyer --save 或者 npm install ...
Debian11安装VLC Media Player视频播放器
在终端内执行下面命令: sudo apt install vlc
让你分分钟学会qt视频播放器
话不多说先上图: 实现了一个基本的播放器的例子,实现出最近本的项目,项目比较基础,喜欢的朋友,可呀通过这些简单的例子,实现更为复杂的视屏播放器,比如一些客户端. 不多说了来看看代码吧: 工程文件使用的 ...
vue设置video图片_vue-video-player视频播放器使用配置详解
本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...

vue + mui-player视频播放器

vue + mui-player视频播放器相关推荐

最新文章

热门文章