uni-app + mui-player & vue + mui-player 播放flv文件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)