MuiPlayer视频播放组件入门

最新推荐文章于 2024-04-19 11:05:53 发布

Roc-xb

最新推荐文章于 2024-04-19 11:05:53 发布

阅读量5.1k

点赞数 4

文章标签：视频播放器 html js

本文链接：https://blog.csdn.net/qq_19309473/article/details/118024401

版权

前端专栏收录该内容

94 篇文章 44 订阅

订阅专栏

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在线文档