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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐