@sherry-utils/video-player
这个播放工具是基于 flv.js 来进行二次封装的。
安装
npm i @sherry-utils/video-player
yarn add @sherry-utils/video-player
pnpm i @sherry-utils/video-player
使用
flv-player
- 首先在页面上要有一个
video
元素 - 安装
@sherry-utils/video-player
- 从
@sherry-utils/video-player
引入 FLVPlayer - 创建 FLVPlayer 实例
- 将 FLVPlayer 实例关联到
video
元素上
示例
- Vue3 TS 示例
<template>
<video
controls
disablepictureinpicture
ref="videoRef"
class="video-item"
></video>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { FLVPlayer } from "@sherry-utils/video-player";
import ItemWrapper from "../wrappers/item-wrapper.vue";
const paused = ref<boolean>(true);
const videoRef = ref<HTMLVideoElement>();
const videoWrapperRef = ref<HTMLDivElement>();
let flvItem: FLVPlayer | null = null;
const startPlayer = () => {
if (flvItem) {
flvItem.play();
paused.value = false;
}
};
const setVideoEvents = (target: HTMLVideoElement) => {
target.addEventListener("pause", () => {
paused.value = true;
});
target.addEventListener("error", () => {
loadVideo();
});
};
const loadVideoByPath = (path: string) => {
if (videoRef.value) {
flvItem = new FLVPlayer(path);
flvItem.connect(videoRef.value);
setVideoEvents(videoRef.value);
}
};
let reloadTime = 0;
const loadVideo = async () => {
try {
const path = "你的视频流地址";
loadVideoByPath(path);
} catch (error) {
reloadTime += 1;
if (reloadTime <= 3) {
setTimeout(loadVideo, 0.5 * 1000);
}
}
};
onMounted(() => {
loadVideo();
});
onBeforeUnmount(() => {
flvItem?.close();
});
</script>