手把手教你使用 FLV.js 在 Vue 项目中播放 FLV 视频

在前端开发中，播放 FLV 格式的视频是一个常见需求。FLV.js 是一个强大的 JavaScript 库，它能让你在支持 HTML5 视频的浏览器中播放 FLV 视频。本文将结合 FlvPlayer.vue 组件代码，详细讲解如何在 Vue 项目中使用 FLV.js 来播放 FLV 视频。

1. 项目结构与文件引入

1.1 引入必要的依赖

在 FlvPlayer.vue 文件中，我们首先引入了一些必要的依赖，包括 Vue 的组合式 API、flv.js 库、element-plus 的通知组件以及车辆信息的状态管理模块。

/src/components/FlvPlayer.vue 复制代码

import { onMounted, onBeforeUnmount, watch, ref, nextTick } from "vue";
import flvjs from "flv.js";
import { ElNotification } from "element-plus";
import { useVehicleStore } from "@/stores/modules/vehicleInfo";

onMounted、onBeforeUnmount、watch、ref 和 nextTick 是 Vue 的组合式 API，用于处理组件的生命周期、响应式数据和异步操作。
flvjs 是核心库，用于处理 FLV 视频的播放。
ElNotification 用于在视频加载失败时弹出通知。
useVehicleStore 用于获取车辆信息。

2. 模板部分 (`<template>`)

2.1 模板结构

模板部分定义了视频播放器的 HTML 结构，使用了一个 div 容器和一个 video 元素。

/src/components/FlvPlayer.vue 复制代码

<template>
  <div class="player" style="position: relative">
    <video v-show="url" ref="videoElement" class="centeredVideo" controls autoplay muted :class="url"></video>
  </div>
</template>

v-show="url"：根据 url 是否存在来显示或隐藏视频元素。
ref="videoElement"：用于在 JavaScript 中引用该视频元素。
controls：显示视频播放器的控制条。
autoplay：视频自动播放。
muted：视频静音播放。
:class="url"：动态绑定类名，方便后续样式控制。

3. 脚本部分 (`<script>`)

3.1 组件定义与 props

组件使用 export default 导出，定义了三个 props，分别是 title、url 和 vehicleId。

/src/components/FlvPlayer.vue 复制代码

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: "`https://wwww.xxx.xxx.xxxx.flv"
    },
    vehicleId: {
      type: String,
      default: ""
    }
  },

title：视频标题，默认为空字符串。
url：视频的 FLV 地址，默认为一个包含 vehicleId 的模板字符串。
vehicleId：车辆 ID，默认为空字符串。

3.2 `setup` 函数

setup 函数是 Vue 3 组合式 API 的入口，用于初始化组件的状态和逻辑。

src/components/FlvPlayer.vue 复制代码

setup(props, { emit }) {
  const videoElement = ref(null);
  const flvPlayer = ref(null);
  let bufferCleanInterval = null;

videoElement：用于引用视频元素。
flvPlayer：用于引用 flv.js 创建的播放器实例。
bufferCleanInterval：用于存储定时器 ID，以便后续清理。

3.3 `loadFlv` 函数

loadFlv 函数用于加载 FLV 视频。

``/src/components/FlvPlayer.vue const loadFlv = url => { if (!isValidUrl(url)) { console.error("Invalid URL provided"); return; } if (flvjs.isSupported()) { try { nextTick(() => { flvPlayer.value = flvjs.createPlayer( { type: "flv", url: url || "", isLive: true, hasAudio: false, hasVideo: true, enableStashBuffer: false, // 减少缓冲区大小 stashInitialSize: 128 * 1024 }, { enableWorker: false, enableStashBuffer: false, autoCleanupSourceBuffer: true, // 调整缓冲区清理阈值 maxBufferSize: 1024 * 1024, maxBufferDuration: 3 } ); flvPlayer.value.attachMediaElement(videoElement.value); // 监听加载错误事件 flvPlayer.value.on(flvjs.Events.ERROR, (type, info) => { console.error("FLV player error:", type, info); openMessages("error", "视频加载失败，请检查网络或URL"); }); flvPlayer.value.load(); flvPlayer.value.play(); console.log("FLV player loaded and started successfully");

scss 复制代码

    // 定期清理缓冲区
    bufferCleanInterval = setInterval(() => {
      if (flvPlayer.value) {
        flvPlayer.value.cleanupSourceBuffer();
      }
    }, 5000);
  });
} catch (error) {
  console.error("Error initializing FLV player:", error);
}

} else { console.error("FLV.js is not supported in this browser"); } };

markdown 复制代码

- 首先检查 `url` 是否有效，如果无效则输出错误信息并返回。
- 检查浏览器是否支持 `flv.js`，如果支持则创建播放器实例。
- `flvjs.createPlayer` 方法用于创建播放器实例，传入两个配置对象，分别是视频流配置和播放器配置。
- `attachMediaElement` 方法将播放器实例与视频元素关联起来。
- 监听 `ERROR` 事件，当视频加载失败时弹出通知。
- 调用 `load` 和 `play` 方法开始加载和播放视频。
- 使用 `setInterval` 定期清理缓冲区，避免缓冲区过大。

### 3.4 `destroyPlayer` 函数
`destroyPlayer` 函数用于销毁播放器实例和清理定时器。

```/src/components/FlvPlayer.vue
const destroyPlayer = () => {
  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.detachMediaElement();
    flvPlayer.value.destroy();
    flvPlayer.value = null;
  }
  if (bufferCleanInterval) {
    clearInterval(bufferCleanInterval);
  }
};

依次调用 pause、unload、detachMediaElement 和 destroy 方法销毁播放器实例。
清除定时器，避免内存泄漏。

3.5 `isValidUrl` 函数

isValidUrl 函数用于检查 url 是否有效。

/src/components/FlvPlayer.vue 复制代码

const isValidUrl = urlString => {
  try {
    new URL(urlString);
    return true;
  } catch (e) {
    return false;
  }
};

使用 new URL 方法尝试创建一个 URL 对象，如果成功则返回 true，否则返回 false。

3.6 `openMessages` 函数

openMessages 函数用于弹出通知。

/src/components/FlvPlayer.vue 复制代码

const openMessages = (status, message) => {
  ElNotification({
    title: status,
    dangerouslyUseHTMLString: false,
    message: JSON.stringify(message),
    type: status,
    duration: 5000
  });
};

使用 ElNotification 组件弹出通知，传入标题、消息内容、类型和持续时间。

3.7 生命周期钩子和 `watch`

/src/components/FlvPlayer.vue 复制代码

onMounted(() => {
  loadFlv(props.url);
});

onBeforeUnmount(() => {
  destroyPlayer();
});

const useVStore = useVehicleStore();

watch(
  () => [props.url],
  val => {
    destroyPlayer();
    loadFlv(val);
  },
  { deep: true, immediate: true }
);

onMounted：组件挂载后调用 loadFlv 函数加载视频。
onBeforeUnmount：组件卸载前调用 destroyPlayer 函数销毁播放器实例。
watch：监听 props.url 的变化，当 url 变化时，先销毁当前播放器实例，再重新加载新的视频。

3.8 返回值

/src/components/FlvPlayer.vue 复制代码

return {
  videoElement,
  destroyPlayer: () => {
    destroyPlayer();
  },
  loadFlv: () => {
    alert("重新加载=", props.url);
    loadFlv(props.url);
  }
};

返回 videoElement、destroyPlayer 和 loadFlv 函数，方便在模板中使用。

4. 样式部分 (`<style>`)

4.1 样式定义

样式部分定义了播放器容器和视频元素的样式。

/src/components/FlvPlayer.vue 复制代码

<style scoped lang="scss">
.player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 15px;
  color: white;
  text-align: center;
}

.centeredVideo {
  width: 90%;
  height: 80%;
  margin: 0 5px;
  border: #313131 2px solid;
}

.centeredVideo:hover {
  border: #8bff62 2px solid;
}

p {
  position: absolute;
  top: -25px;
  right: 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bolder;
  color: #3cb1ad;
  text-align: center;
}
</style>

.player：使用 flex 布局将视频元素居中显示。
.centeredVideo：设置视频元素的宽度、高度和边框样式。
.centeredVideo:hover：设置鼠标悬停时的边框样式。
p：设置标题的样式。

5. 使用示例

在其他组件中使用 FlvPlayer.vue 组件的示例：

vue 复制代码

<template>
  <div>
    <FlvPlayer title="视频标题" url="https://example.com/video.flv" vehicleId="123" />
  </div>
</template>

<script setup>
import FlvPlayer from "@/components/FlvPlayer.vue";
</script>

引入 FlvPlayer.vue 组件。
在模板中使用 FlvPlayer 组件，并传入 title、url 和 vehicleId。

总结

通过以上步骤，你可以在 Vue 项目中使用 FLV.js 来播放 FLV 视频。FlvPlayer.vue 组件封装了视频加载、播放、错误处理和缓冲区清理等功能，方便你在项目中复用。希望本文能帮助你更好地理解和使用 FLV.js。

手把手教你使用 FLV.js 在 Vue 项目中播放 FLV 视频