Nuxt3集成Flv直播播放器：mpegts.js

---

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