Vue 之视频流 - Hls.js

1.如果需要连接现场的局域网，可以先使用EasyConnect连接VPN，使用设备所有的内网2.使用VLC先测试视频流是否存在问题3.进行代码编写01-下载hls.jsnpm install hls.jsyarn add hls.js02-在页面进行引入import hlsjs from 'hls.js'03-编写html部分代码<template><div class="pla

玄鱼殇

14158人浏览 · 2021-04-07 10:55:58

玄鱼殇 · 2021-04-07 10:55:58 发布

一、前情提要

1. 作用

作用 : 使用hls.js拉流播放m3u8格式

2. 准备一

如果需要连接现场的局域网，可以先使用EasyConnect连接VPN，使用设备所在的内网

网址 : EasyConnect.rar - CSDN下载

3. 准备二

使用VLC先测试视频流是否存在问题

网址 : VLCplay.rar - CSDN下载

二、使用

1. 安装依赖

npm install hls.js

2. 页面引入

import hlsjs from 'hls.js'

3. 代码

html

<template>
  <div class="playVideo-layout">
    <!-- 播放器 -->
    <div id="app-container" class="video-box">
      <video
        ref="videoElement"
        :src="videoUrl"
        id="videoElement"
        controls
        muted
        style="width: 100%; height: 100%; object-fit: fill"
      ></video>
    </div>
  </div>
</template>

js

import hlsjs from "hls.js";
export default {
  name: "About",
  components: {},
  data() {
    return {
      videoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",//这里书写路径，例
    };
  },
  mounted() {
    this.show();
  },
  methods: {
    //播放
    show() {
      this.video = this.$refs.videoElement; //定义挂载点
      console.log(this.video);
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(this.videoUrl);//设置播放路径
        this.hlsjs.attachMedia(this.video);//解析到video标签上
        console.log(this.hlsjs);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          //   console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },
    //停止播放
    closeVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.video.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
        this.$emit("closeVideo");
      }
    },
  },
  computed: {},
  watch: {},
  filters: {},
};