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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值