NodeJS 如何使用Vue3.js单页应用实现HLS视频服务

0yycz8jy 于 2023-06-05 发布在 Node.js

关注(0)|答案(1)|浏览(153)

我正在用Vue.js创建视频流平台。然而，我遇到了我无法解决的问题。也就是说，当我们使用像Vue.js这样的SPA时，JavaScript在浏览器上运行，因此我们必须从服务器端API接收段文件。如果我使用MPA，我所要做的就是指定.m3u8文件的位置。我在Node.js上使用express。
我的问题是如何创建API，将.m3u8文件和分段.ts文件发送到客户端Vue.js。现在，所有的.m3u8和.ts段文件都在服务器端，所以我想知道如何使用SPA和node.js从服务器端API访问或接收数据。

node.js

来源：https://stackoverflow.com/questions/74678028/how-to-implement-hls-video-service-with-vue3-js-single-page-application

1条答案

按热度按时间

0h4hbjxa1#

我是前端开发人员，我只能描述第二部分，如何在vue 3中处理m3u8。
1.在前端部分，你应该从API接收到视频链接作为响应[对于深度答案，你需要等待后端开发人员]
1.然后如果你要使用m3u8格式的视频，你需要安装npm i vue-hls-video-player
只使用一个组件，例如：

<VideoPlayer
    type="default"
    @pause="processPause"
    previewImageLink="poster.webp"
    link="videoLink.m3u8"
    :progress="30"
    :isMuted="false"
    :isControls="true"
    class="customClassName"
  />

  <VideoPlayer
    type="preview"
    previewImageLink="poster.webp"
    link="videoLink.m3u8"
    class="customClassName"
  />

如果您需要更多详细信息，请访问此文档vue-hls-video-player
此外，你可以研究hls.js，它是vue-hls-video-player的基础模块。
另外，我还要补充一点，这个组件只维护.m3u8。对于默认格式的工作，您需要使用默认的视频html标记

赞(0）回复(0）举报 2023-06-05

我来回答

NodeJS 如何使用Vue3.js单页应用实现HLS视频服务

1条答案

相关问题

热门标签

最新问答