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>