作为一名前端开发者，我曾参与过一个视频播放相关的项目，当时的主要任务是实现一个支持多种视频格式的播放器。在项目中，我们遇到了不少挑战，比如不同视频格式的兼容性问题、H.265 和 H.264 编码的支持，以及播放性能的优化等。虽然最终项目顺利完成，但我也意识到，如果能有一个通用的视频播放组件，可以轻松兼容多种格式和编码，那将会大大提升开发效率。
最近，我了解到西瓜视频播放器，它不仅支持 H.265 和 H.264 编码，还能兼容 FLV、M3U8 和 MP4 等常见视频格式。这让我眼前一亮，于是决定基于西瓜视频播放器，封装一个通用的 Vue 组件。这个组件只需要传入视频流地址和视频格式，就能自动适配 H.265 和 H.264 编码，并支持多种视频格式的播放。话不多数开整。
目录
四、实现支持mp4的使用（默认支持mp4格式，不用单独下载）
八.开源了一个视频播放器组件（general-video-player插件）
前言
整体项目内容太多不过分介绍（之前文章有大致提及），其中一块内容是不同格式分屏直播窗口功能，因此一款能支持多种视频流格式的视频播放器组件显得尤为重要，实现了这个那么就相当于打好了地基高楼就可以有条不紊的搭建了。
一、首先需要在项目中安装西瓜播放器的插件（用哪个装哪个）
必不可少的是xgplayer，适配flv就需要装xgplayer-flv，适配m3u8就需要装xgplayer-hls，适配mp4的可以安装xgplayer-mp4（当然也可以不装，西瓜默认支持mp4格式），看好版本下载对应的插件，当然也需要参考对应版本的文档哈。
二、实现支持flv的使用
1.下载对应的库并引入组件（此时间点的最新版本）
npm install xgplayer@3.0.20 xgplayer-flv@3.0.20import Player from "xgplayer";
import FlvPLugin from "xgplayer-flv";
import "xgplayer/dist/xgplayer.min.css"2.组件结构使用（注意组件中标识的id一定要唯一）
<template>
<div class="flv-player-xg-king-container">
<!-- 屏幕 -->
<div id="myPlayerFLV" class="xg-style"></div>
</div>
</template>3.组件方法使用（配置很多，需要啥配置啥就行）
export default {
name: "FlvPlayer",
data() {
return {
myPlayerFlv: null, // 视频实例
videoUrl: null, // 视频链接
height: "380px",
width: "600px",
};
},
mounted() {
this.init();
},
methods: {
// 初始化视频
init() {
if (FlvPLugin.isSupported()) {
// FlvPlayer继承于xgplayer
this.myPlayerFlv = new Player({
id: "myPlayerFLV", // 渲染的标签
isLive: true, // 直播开始与否
url: this.videoUrl, // 资源地址（视频流地址）
width: this.width, // 默认是600px
height: this.height, // 默认是337.5px
autoplay: true, // 自动播放
videoFillMode: "fill", // 画面填充模式
plugins: [FlvPLugin], // 引入插件
flv: {
retryCount: 3, // 重试 3 次，默认值
retryDelay: 1000, // 每次重试间隔 1 秒，默认值
loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
fetchOptions: {
// 该参数会透传给 fetch，默认值为 undefined
mode: "cors",
},
},
});
}
},
},
// 销毁组件时销毁视频
beforeDestroy() {
if (this.myPlayerFlv) {
this.myPlayerFlv.destroy();
}
this.myPlayerFlv= null;
},
};三、实现支持m3u8的使用
1.下载对应的库并引入组件（此时间点的最新版本）
npm install xgplayer@3.0.20 xgplayer-hls@3.0.20import Player from "xgplayer";
import HlsPLugin from "xgplayer-hls";
import "xgplayer/dist/xgplayer.min.css"2.组件结构使用（注意组件中标识的id一定要唯一）
<template>
<div class="hls-player-xg-king-container">
<!-- 屏幕 -->
<div id="myPlayerHls" class="xg-style"></div>
</div>
</template>3.组件方法使用（配置很多，需要啥配置啥就行）
export default {
name: "HlsPlayer",
data() {
return {
myPlayerHls: null, // 视频实例
videoUrl: null, // 视频链接
height: "380px",
width: "600px",
};
},
mounted() {
this.init();
},
methods: {
// 初始化视频
init() {
if (HlsPlugin.isSupported()) {
this.myPlayerHls = new Player({
id: "myPlayerHls", // 渲染的标签
isLive: true, // 直播开始与否
url: this.videoUrl, // 资源地址（视频流地址）
width: this.width, // 默认是600px
height: this.height, // 默认是337.5px
autoplay: true, // 自动播放
videoFillMode: "fill", // 画面填充模式
plugins: [HlsPlugin], // 引入插件
hls: {
retryCount: 3, // 重试 3 次，默认值
retryDelay: 1000, // 每次重试间隔 1 秒，默认值
loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
fetchOptions: {
// 该参数会透传给 fetch，默认值为 undefined
mode: "cors",
},
},
});
},
}
},
// 销毁组件时销毁视频
beforeDestroy() {
if (this.myPlayerHls) {
this.myPlayerHls.destroy();
}
this.myPlayerHls= null;
},
};四、实现支持mp4的使用（默认支持mp4格式，不用单独下载）
1.下载对应的库并引入组件（此时间点的最新版本）
npm install xgplayer@3.0.20 xgplayer-mp4@3.0.20import Player from "xgplayer";
import Mp4Plugin from "xgplayer-mp4";
import "xgplayer/dist/xgplayer.min.css"2.组件结构使用（注意组件中标识的id一定要唯一）
<template>
<div class="mp4-player-xg-king-container">
<!-- 屏幕 -->
<div id="myPlayerMp4" class="xg-style"></div>
</div>
</template>3.组件方法使用（配置很多，需要啥配置啥就行）
export default {
name: "Mp4Player",
data() {
return {
myPlayerMp4: null, // 视频实例
videoUrl: null, // 视频链接
height: "380px",
width: "600px",
};
},
mounted() {
this.init();
},
methods: {
// 初始化视频
init() {
this.myPlayerMp4 = new Player({
id: "myPlayerMp4", // 渲染的标签
isLive: true, // 直播开始与否
url: this.videoUrl, // 资源地址（视频流地址）
width: this.width, // 默认是600px
height: this.height, // 默认是337.5px
autoplay: true, // 自动播放
videoFillMode: "fill", // 画面填充模式
plugins: [Mp4Plugin], // 引入插件
});
}
},
// 销毁组件时销毁视频
beforeDestroy() {
if (this.myPlayerMp4) {
this.myPlayerMp4.destroy();
}
this.myPlayerMp4= null;
},
};五.对以上三种格式进行兼容封装
<!--
* @Description: 同时支持H265和H264协议的flv、m3u8、mp4视频播放组件
* @version: 0.0.2
* @Author: King
* @Date: 2025-03-18 09:49:11
* @LastEditors: xinShiCheng
* @LastEditTime: 2025-03-20 14:00:00
-->
<template>
</template>
<script>
// 由于部分原因核心代码可以单独交流沟通分享 当然可以直接使用 npm i general-video-player
</script>
<style scoped lang="scss">
</style>
六.简单的父组件使用
// 由于部分原因核心代码可以单独沟通分享，当然可以直接使用 npm i general-video-player
<template>
<div class="parent-container">
<video-player />
</div>
</template>
<script>
// 识别视频流格式（只有视频流地址有后缀的才可以用哈，没有后缀的地址，格式可以让后端提供）
import { getType } from "@/utils/KingVideoType";
// 组件引入
import VideoPlayer from "@/components/WatermelonPlayer/VideoPlayer.vue";
export default {
name: "PlaybackVideoView",
components: { VideoPlayer },
data() {
return {
}
},
methods: {
}
}
</script>七.此处是根据视频地址后缀识别视频格式的方法
// 文件位置在工程目录 src/utils/KingVideoType.js
export function getType(url) {
if (!url) {
return;
}
// 查找 URL 中最后一个点号之后的部分，即文件扩展名
const urlParts = url.split("/");
const fileName = urlParts.pop(); // 获取文件名（可能包含查询参数）
const fileExtension = fileName.split("?")[0].split(".").pop().toLowerCase(); // 去除查询参数并获取扩展名
let mimeType = "";
switch (fileExtension) {
case "flv":
mimeType = "flv";
break;
case "m3u8":
mimeType = "m3u8";
break;
case "mp4":
mimeType = "mp4";
break;
// default:
// mimeType = "flv";
// break;
// 可以在这里添加更多文件类型和对应的 MIME 类型
}
return mimeType;
}
八.开源了一个视频播放器组件（general-video-player插件）
为了节省开发者自己写代码的步骤节约时间提升效率的同时也为了使用更加方便本人开源了一个视频播放器的插件，可以点击标题链接访问也可以在npm官网搜索（general-video-player）一步到位，供大家使用，在使用中如果有发现不足希望大家给予宝贵建议，新手上路多多关照。
总结
在这次项目中，我尝试使用了**西瓜视频播放器插件**，整体体验非常出色。它不仅使用方便，而且功能强大，完美解决了之前项目中多格式视频兼容的痛点。通过支持 H.265 和 H.264 编码，以及 FLV、M3U8 和 MP4 等常见视频格式，西瓜视频播放器极大地简化了视频播放功能的开发流程，提升了项目的开发效率和用户体验。
在封装通用 Vue 组件的过程中，我深刻感受到西瓜视频播放器的灵活性和易用性。无论是直播流媒体还是点播视频，它都能轻松应对，为我的项目带来了诸多便利。当然，由于本人技术有限，代码实现中难免存在一些不足之处，欢迎大家留言或私信指正，共同探讨和改进。
最后，感谢大家的阅读和支持！看完觉得有点用的可以用您发财的小手帮忙点个赞，希望这篇文章能为大家在视频播放技术的探索中提供一些帮助和启发。未来，我也会继续学习和分享更多实用的技术内容，与大家共同进步！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
