uniapp使用muiplayer播放器
- 在根目录hybrid(没有则创建)创建html目录,并新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="../../static/muiPlayer/mui-player.min.css" />
<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="../../static/muiPlayer/mui-player.min.js"></script>
</head>
<style type="text/css">
body { margin: 0; }
#interfaceDemo button {margin-right: 8px;margin-bottom: 12px;-webkit-appearance: button;color: #fff;background: #1890ff;text-shadow: 0 -1px 0 rgba(0,0,0,.12);-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);box-shadow: 0 2px 0 rgba(0,0,0,.045);outline: 0;line-height: 1.5715;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;touch-action: manipulation;height: 32px;padding: 4px 15px;font-size: 14px;border-radius: 2px;border: none;cursor: pointer;user-select: none;}
#interfaceDemo button:active {opacity: 0.8;}
</style>
<body>
<!-- 指定Mplayer容器,并且绑定属性id初始化是使用 -->
<div id="mui-player" style="">
<script>
var params = window.location.href.split("?")[1].split("&")
document.title = decodeURIComponent(params[1].split("=")[1])
// 初始化 MuiPlayer 插件,MuiPlayer 方法传递一个对象,该对象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
autoplay: true,
// initFullFixed: true,
title:decodeURIComponent(params[1].split("=")[1]),
src:decodeURIComponent(params[0].split("=")[1])
})
<script>
</div>
</body>
</html>
- static目录创建muiPlayer目录,引入mui-player.mim.css,mui-player.min.js
下载:muiplayer.js.org/zh/(muiPlay…
3.视频播放页面
<view>
<web-view src="/hybrid/html/index.html?fileUrl="></web-view>
</view>
fileUrl指视频的链接,上述src不完整,还未拼接真正的fileUrl
参考链接:muiplayer.js.org/zh/guide/un… uniapp.dcloud.io/component/w…