uni-app + mui-player & vue + mui-player 播放flv文件

uni-app:
先在项目的根路径下打开终端，安装mui-player：

npm install mui-player --save

再安装个flv.js依赖：

npm install flv.js --save

然后再到main.js中引入：

import "mui-player/dist/mui-player.min.css";
import muiPlayer from 'mui-player';

再页面上创建元素，并定义id：

<view class="" id="mui-player"></view>

然后再创建muiPlayer播放器：

// 特别注意：在uni-app中不是文档上面的new muiPlayer，而是new muiPlayerMin，不然会undefined
initPlayer(){
	var mp = new muiPlayerMin({
		container: '#mui-player',
		title: '标题',
		autoplay: true, // 自动播放，部分浏览器不支持，比如谷歌，需要用户与页面交互才可以播放
		src: 'https://XXXXXXXXXXXXXXX', // 视频播放地址
		parse: {
			type: 'flv',
			loader: FlvJs,
			config: {
				cors: true // 允许跨域
			}
		}
	})
}

然后调用即可：

mounted(){
	this.initPlayer()
}

vue的：
先在项目的根路径下打开终端，安装mui-player：

npm install mui-player --save

再安装个flv.js依赖：

npm install flv.js --save

然后再到main.js中引入：

import "mui-player/dist/mui-player.min.css";

其它都差不多，直接上代码

<template lang="">
  <div>
    <div style="height:400px;width:600px;background-color:red" id="mui-player"></div>
  </div>
</template>
<script>
import MuiPlayer from "mui-player";
import FlvJs from 'flv.js';
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(() => {
      var mp = new MuiPlayer({
        container: '#mui-player',
        title: '标题',
        autoplay: true,
        src: 'https://pull-flv-f13.douyincdn.com/stage/stream-113867340734530218_sd.flv?expire=1697361067&sign=98e30bfcb937be71d81bb3dd52bb1e4c&abr_pts=-800&_session_id=037-20231008171107884B284913F4A40980D7',
        parse: {
          type: 'flv',
          loader: FlvJs,
          config: {
            cors: true
          }
        }
      })
    })
  },
}
</script>