MuiPlayer视频播放组件入门

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。

方式一：使用 npm 或 yarn 安装

方式二：使用 script 标签引入

方式一：使用 npm 或 yarn 安装

1、使用npm安装

npm i mui-player --save

2、使用yarn安装

yarn add mui-player

3、模块引入

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

方式二：使用 script 标签引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MuiPlayer</title><!-- 引入基础样式文件 mui-player.min.css --><link rel="stylesheet" type="text/css" href="https://muiplayer.js.org/css/mui-player.min.css" /><!-- 引入基础脚本 mui-player.min.js --><script type="text/javascript" src="https://muiplayer.js.org/js/mui-player.min.js"></script>
</head>
<body><!-- 指定播放器容器 --><div id="mui-player"></div><script>// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置var mp = new MuiPlayer({container: '#mui-player',title: '视频标题',src: 'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/media.mp4',})</script>
</body>
</html>

文档可以参考：MuiPlayer在线文档

MuiPlayer视频播放组件入门相关推荐

Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用按照官网教程学习使用组件,并且重点把容器组件的应用进行了练习. 1.官网关于组件的介绍组件是视图层的基本组成单元,是一个单独且可复用的 ...
Flutter视频播放、Flutter VideoPlayer 视频播放组件精要
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
Vue视频播放组件（Video）
可自定义设置以下属性: 视频文件url(videoUrl),必传视频封面url(videoCover),默认为null 视频播放器宽度(width),默认为800px 视频播放器高度(height) ...
vue视频播放组件vue-mini-player
vue-mini-player 官方文档:vue-mini-player: 基于Vue的一个轻量级HTML5视频播放组件,适配PC和移动端
xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件，内置解析器、也能节省流量
一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品. 关于西瓜播放器西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器 ...
vue-dplayer 视频播放组件介绍
目录前言安装使用 1. main.js中全局引入 2. vue 页面引入 3. 属性配置前言年后开工第一帖,新的一年更要加油鸭~ 最近在整理视频播放组件的资料,发现dplayer组件,除了完 ...
微信小程序 - 实现＜video＞视频组件自定义封面及播放按钮，给 video 视频播放组件加上封面图、封面标题、封面描述文字、自定义的播放按钮、DIY 封面等（详细示例源码）
前言网上的教程都太乱了,根本无法进行改造,本文做优质的教程. 本文实现了微信小程序项目中,给 <video> 视频播放组件增加自定义封面.播放按钮.描述等一切 DIY! 您直接一键复制 ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
vue + mui-player视频播放器
安装使用 npm 安装: npm i mui-player --save 使用 yarn 安装: yarn add mui-player #使用 1.使用 script 标签引入: <!-- ...

MuiPlayer视频播放组件入门

方式一：使用 npm 或 yarn 安装

方式二：使用 script 标签引入

MuiPlayer视频播放组件入门相关推荐

最新文章

热门文章