使用vuejs项目实现hls.js库

7vhp5slm 于 2023-05-29 发布在 Vue.js

关注(0)|答案(2)|浏览(343)

我需要一些帮助，试图弄清楚如何在vuejs中使用hls.js库，因为它没有具体的文档说明如何用vue实现它。这里的情况是，我必须从一个API中获取m3u8，我可以从一个基本的html中使用标签和cdn来使它工作，但是当我试图用vuejs实现它时，它不起作用，任何帮助都是感激的。我尝试了两个实现，每次都得到相同的错误。这些是我目前为止得到的：

第一次尝试：使用cdn并包含在it组件中

export default {
  head() {
     return {
       script: [
         {
           src: 'https://cdn.jsdelivr.net/npm/hls.js@latest'
         }
       ],
     }
   }}

函数created（）

checkHLS(){
      console.log('in');
      if (Hls.isSupported()) {
        console.log('working')
      }
    },

重试使用npm安装包

npm install --save hls.js

我得到了这个错误

Hls is not defined
An error occurred while rendering the page. Check developer tools console for details.

vue.js

来源：https://stackoverflow.com/questions/63298573/implement-hls-js-library-with-vuejs-project

2条答案

按热度按时间

1sbrub3j1#

通过npm安装hls.js：npm i --save hls.js@latest
以下是如何在组件中使用它：

<template>
  <video ref="video" width="100%" height="640" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    let hls = new Hls();
    let stream = "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8";
    let video = this.$refs["video"];
    hls.loadSource(stream);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  },
};
</script>

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

2skhul332#

你可以尝试使用npm模块来处理m3u8视频。此软件包适用于vue3
vue-hls-video-player
也许，这个模块可以解决你的问题

npm i vue-hls-video-player

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

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

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

我来回答

使用vuejs项目实现hls.js库

2条答案

相关问题

热门标签

最新问答