Vue结合Video.js播放m3u8视频流的方法示例

这里是Vue结合Video.js播放m3u8视频流的完整攻略：

这里是Vue结合Video.js播放m3u8视频流的完整攻略：

一、安装Video.js

使用npm安装Video.js：

npm install video.js --save

二、引入Video.js和CSS文件

在Vue的App.vue中引入Video.js和CSS文件：

<template>
  <div>
    <video
      id="myPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="264"
    >
      <source :src="sourceUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
  name: "App",
  data() {
    return {
      sourceUrl: "http://example.com/example.m3u8",
    };
  },
  mounted() {
    this.player = videojs("myPlayer", {
      fluid: true,
      autoplay: true,
    });
  },
  destroyed() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

三、使用Video.js播放m3u8视频流

以上代码创建了一个Video.js播放器，这里设置了视频源的URL为http://example.com/example.m3u8。

四、动态改变视频源

<template>
  <div>
    <video
      id="myPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="264"
    >
      <source :src="sourceUrl" type="application/x-mpegURL" />
    </video>
    <button @click="changeVideoSource">change video source</button>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
  name: "App",
  data() {
    return {
      sourceUrl: "http://example.com/example.m3u8",
    };
  },
  mounted() {
    this.player = videojs("myPlayer", {
      fluid: true,
      autoplay: true,
    });
  },
  destroyed() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    changeVideoSource() {
      this.sourceUrl = "http://example.com/new_example.m3u8";
      this.player.src(this.sourceUrl);
    },
  },
};
</script>

以上代码添加了一个按钮，当点击按钮时，会动态修改视频源的URL。在Vue中，使用:src绑定视频源，通过修改数据绑定的sourceUrl属性来动态改变视频源。同时，在changeVideoSource方法中，使用player.src方法将新的URL设置为视频的源。