uniapp使用muiplayer播放器

2,392 阅读1分钟

uniapp使用muiplayer播放器

  1. 在根目录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>
  1. 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…