关于vue3开发西瓜视频播放器–xgplayer的那些坑
写在前面,官网地址:https://v2.h5player.bytedance.com/plugins/#xgplayer-flv-js
刚入职就接手一个需求,开发一个直播流,实现在线实时监控的播放功能。话不多说,直接进入主题,坑在哪里?
用西瓜视频播放器的插件实现时要注意区分视频格式是flv或者是MP4格式,还是直播流,每种类型的插件选择是不一样的,例如:这个是直播流的插件
踩坑踩多了也就习惯了,还好官网有示例,可以反复尝试。
各位小伙伴,如果需要实现flv视频播放的话,代码呈上,请笑纳!
记住,plugins是关键,因为这个配置没写,效果一直出不来
import Player from "xgplayer";
import FlvPlayer from "xgplayer-flv";
const initPlayer = () => {
player = new Player({
id: "player",
url: url,
plugins: [FlvPlayer],
playsinline: false,
autoplay: true,
fluid: true,
isLive: true,
screenShot: true,
whitelist: [""],
ignores: ["time"],
closeVideoClick: true,
customConfig: {
isClickPlayBack: false,
},
});
};
接下来就是直播流的了,写法都差不多,关键点就是配置项
import Player from "xgplayer";
import FlvJsPlayer from 'xgplayer-flv.js';
const initPlayer = ()=>{
player= new Player({
id: 'player',
url: url,
plugins: [FlvJsPlayer],
fluid: true,
autoplay: true,
isLive: true,
playsinline: false,
screenShot: true,
whitelist: [''],
ignores: ['time'],
closeVideoClick: true,
// errorTips: '<span class="app-error">无视频源</span>',
customConfig: {
isClickPlayBack: false
},
flvOptionalConfig: {
enableWorker: true,
enableStashBuffer: true, //启用缓存
stashInitialSize: 4096, //缓存大小4m
lazyLoad: false,
lazyLoadMaxDuration: 40 * 60,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 35 * 60,
autoCleanupMinBackwardDuration: 30 * 60
}
}
希望对各位小伙伴有用处,哈哈!