[Vue2]video.js读取本地文件夹内m3u8视频

该写代码了

已于 2023-03-15 14:01:02 修改

阅读量1k

点赞数

分类专栏：前端通用文章标签： javascript Powered by 金山文档

于 2023-02-23 13:53:49 首次发布

本文链接：https://blog.csdn.net/qq_37411242/article/details/129179876

版权

前端通用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

后端让我帮她单独做个页面测试视频。。

首先需要用nginx架设一个服务器

依赖：video.js, videojs-contrib-hls, ant-design-vue

url的结构可以根据架设服务器的路径来改（我用的是/video，于是url就指向本地服务器的/video）

url最终路径是m3u8文件，并且确保相关的ts文件和m3u8在一个目录下（例子里是把一个视频的m3u8和ts放在一个文件夹里，所有url会多了一层文件夹名。如果你不需要分文件夹存放视频，url应该是`http://127.0.0.1:${this.portValue}/video/${this.fileName}.m3u8`）

端口号也需要匹配nginx里设置的那个（例子里用的8080）

样式自己改。。需要稍微提一下的是：视频的长宽需要改两个地方，一个是html里的style（videojs渲染前的样子），一个是data里的width和height（videojs渲染后）

import videojs from "video.js";
import "videojs-contrib-hls";

window.videojs = videojs;
require("video.js/dist/lang/zh-CN");

export default {
  name: "VideoText",
  data() {
    return {
      videoOptions: {
        language: 'zh-CN',
        sources: [
          {
            src: '',
            type: 'application/x-mpegURL'
          }
        ],
        controls: true,
        autoplay: true,
        muted: true,
        preload: "auto",
        width: "1580px",
        height: "700px",
        controlBar: {
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true,
          volumePanel: {
            inline: false,
          }
        }
      },
      folderName: null,
      fileName: null,
      portValue: null,
      player: null
    };
  },
  mounted() {
    this.portValue = localStorage.getItem('portValue') || 8080;
    this.fileName = localStorage.getItem('fileName') || 'merge-2';
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    changeFile() {
      const url = `http://127.0.0.1:${this.portValue}/video/${this.folderName}/${this.fileName}.m3u8`;
      if (!this.player) {
        this.initPlayer(url);
      }
      this.player.src(url)
      localStorage.setItem('portValue', this.portValue);
      localStorage.setItem('fileName', this.fileName)
    },
    initPlayer(url) {
      this.videoOptions.sources[0].src = url;
      this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
      });
    }
  }
};

<div>
    <video ref="videoPlayer" class="video-js" style="width: 1580px; height: 700px"></video>
    <div style="display: flex">
      <a-input v-model="portValue" addon-after="端口" @enter-keydown="changeFile" style="width: 100px; margin: 50px 0 0 0" />
      <a-input v-model="folderName" allow-clear addon-after="/" @enter-keydown="changeFile" style="width: 250px; margin: 50px 0 0 400px;" placeholder="文件夹名"/>
      <a-input v-model="fileName" allow-clear addon-after=".m3u8" @enter-keydown="changeFile" style="width: 220px; margin: 50px 0 0 0;" placeholder="文件名"/>
      <a-button type="primary" @click="changeFile" style="margin: 50px 0 0 20px;"> GO </a-button>
    </div>
 </div>

最终效果大概是这样的