theme: vuepress
之前提到使用Flv进行直播拉流，那么自然需要一个真正使用的播放器，于是乎想到自己做一个播放器进行对flv直播流的测试，经过一番查找，发现了flv.js，又从该项目的readme中发现了更适合直播的mpegts.js。
测试播放器：https://www.zngg.net/tool/detail/FlvPlayer
我的这个网站用的是nuxt3，所以就有了这篇文章：在Nuxt3中集成mpegts.js直播播放器。我这里分享一下一个很重要的点：分清楚是否需要SSR渲染，是否可以SSR渲染。
分析
这是一个播放器，所以正常来说应该是不可以SSR渲染的，为什么？这种东西必然少不了使用window对象，并且必须在浏览器内执行，因此基本判断它不能使用SSR渲染。
事实上：我最开始是没有进行分辨的，于是乎才了很多坑，所以得出经验，在以后的集成第三方依赖中，首先要判断是否需要SSR渲染，是否可以SSR渲染。
既然不能使用SSR渲染，所以就不能直接导入，因为在Nuxt3中直接导入会默认渲染，因此需要想一个不会在服务端渲染办法，在Nuxt3的官方文档中：https://v3.nuxtjs.org/guide/directory-structure/plugins 可以看到，在Plugins插件目录中来区分仅用于客户端的插件。
原文翻译：
Nuxt 将自动读取您plugins目录中的文件并加载它们。您可以在文件名中使用 .server 或 .client 后缀以仅在服务器或客户端加载插件。
集成
搞清楚了集成插件的方式，接下来就可以上手代码了。
集成的第一步自然是安装：
yarn add mpegts.js
然后按照上面分析的，我们在nuxt3项目的plugins插件目录中新建一个：mpegts.client.ts
plugins目录默认没有，需要自行创建。
这里要写代码也是很简单：
//mpegts.client.ts
import Mpegts from 'mpegts.js';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('mpegts', Mpegts)
})
这样就集成进去了，其实很简单的，搞懂上面说的是否需要服务端渲染之后，以后集成插件真的就没有问题了。
使用方式
const { $mpegts } = useNuxtApp()
接下来的使用中将官网的mpegts替换成$mpegts就可以了。
例如官网的Getting Started：
<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
if (mpegts.getFeatureList().mseLivePlayback) {
var videoElement = document.getElementById('videoElement');
var player = mpegts.createPlayer({
type: 'mse', // could also be mpegts, m2ts, flv
isLive: true,
url: 'http://example.com/live/livestream.ts'
});
player.attachMediaElement(videoElement);
player.load();
player.play();
}
</script>
我们更换改成：
let player = $mpegts.createPlayer({
type: 'mse', // could also be mpegts, m2ts, flv
isLive: true,
url: 'http://example.com/live/livestream.ts'
});
</script>
当然，这样使用就没有问题了。
因为本站前端是开源的，因此可以直接查看代码：https://github.com/ZN-GG/ZNGG-Nuxt3/blob/main/pages/tool/detail/FlvPlayer.vue
