在Vue项目中使用xgplayer.js库播放FLV视频,可以按照以下步骤进行: 1. 在Vue项目中安装xgplayer.js库 首先,你需要在Vue项目中安装xgplayer.js库。可以通过npm或yarn进行安装: bash npm install xgplayer --save # 或者 yarn add xgplayer 2. 在Vue组件中引入xgplayer.js库 在你的Vue组件中,通过import语句引入xgpla...
import { onMounted } from 'vue'; import Player from 'xgplayer' import FlvPlugin from 'xgplayer-flv' import "xgplayer/dist/index.min.css" onMounted(() => { if (FlvPlugin.isSupported()) { const player = new Player({ id: 'dom-id', url: 'XXX', isLive: true, playsinline: true, plu...
「FLV协议:」使用xgplayer-flv,可用于PC、安卓。 import FlvPlugin from 'xgplayer-flv' if (FlvPlugin.isSupported()) { // 第一步,检测当前环境是否支持 const player = new Player({ id: 'dom-id', url: 'test.flv', // flv 流地址 isLive: true, plugins: [FlvPlugin] // 第二步 }) } 「...
$ npm install xgplayer-vue@latest Usage Step 1. Add xgplayer-vue component importXgplayerfrom'xgplayer-vue'; exportdefault{ components:{ Xgplayer } } Step 2. Use in template <Xgplayer:config="config"@player="Player = $event"/> Step 3. Config for xgplayer ...
支持播放格式:MP4、HLS、FLV、MPEG-DASH 兼容性: PC Web端支持直接播放mp4视频,播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions iOS系统Web场景支持直接播放mp4和HLS,不支持播放FLV、MPEG-DASH 安卓系统Web场景支持直接播放mp4和HLS,播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions 之前我有写...
因为是直播流就选择了flvjs, 项目安装xgplayer-flv npm install xgplayer-flv 通过render.js去做视图层,要注意的是nvue无法使用renderjs 详细文档可以自己去uniapp官网查看用法renderjs | uni-app官网uni-app,uniCloud,serverless,renderjs,使用方式,示例,功能详解,注意事项 ...
'mp4', 'hls', 'flv', 'dash' are supported to play and you should add the plugin you want to use.Functional Plugins List. 'Player' is the xgplayer instance which exposed from the component. You can use 'Player' to access the API of xgplayer as follows. ...
使用的场景:欲做一个直播间,并且拉流地址支持 .flv、.m3u8、mp4。同时播放控件需要自定义,支持直播回放、直播时移、微窗显示。 其次,捎带记录一下讨论区功能。 期间使用了 video-player (.flv 格式的直播暂时不支持播放) aliplayer (这个忘记是什么原因了总之也没用成) xgplayer(本次介绍就是使用的这个组件) ...
播放器我当初对比过 MuiPlayer 和 xgPlayer,最终选择了西瓜(背靠大厂、集成度更高)。 我们使用 http-flv 的形式来进行推拉流,所以我们需要同时安装 xgplayer 和 xgplayer-flv $ pnpm add xgplayer xgplayer-flv复制代码 前端框架层面我使用了 Vue3,代码如下(只是播放器相关部分,不是最终成品的代码) ...
Step 1. Add xgplayer-vue component importXgplayerfrom'xgplayer-vue';exportdefault{components:{Xgplayer}} Step 2. Use in template <Xgplayer:config="config"@player="Player = $event"/> Step 3. Config for xgplayer exportdefault{data(){return{config:{id:'vs',url:'/xgplayer-demo.mp4'},Player:...