关于vue3开发西瓜视频播放器--xgplayer的那些坑

最新推荐文章于 2025-10-11 10:03:47 发布

原创最新推荐文章于 2025-10-11 10:03:47 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

vue3 同时被 2 个专栏收录

1 篇文章

订阅专栏

xgplayer

1 篇文章

订阅专栏

本文介绍了在Vue3中使用xgplayer开发直播流播放器时遇到的坑，包括视频格式选择、直播流插件配置以及注意事项，提供了flv和直播流的代码示例，希望能帮助开发者避免常见问题。

关于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
				} 
}