vue 中 使用 vedio.js 实现播放m3u8格式的视频

1安装

yarn add video.js

yarn add videojs-contrib-hls // 这是播放hls流需要的插件

yarn add mux.js // 在vue项目中，若不安装它可能报错

2 vue中 main.js中引入

//video js
import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
Vue.use(hls);

3  实现播放m3u8格式的视频 

单个视频

<template>
  <div class="test-videojs">
    <video
      :id="postId"
      class="video-js"
      controls
      preload="none"
      poster="http://vjs.zencdn.net/v/oceans.png"
      :options="options"
    >
      <source :src="this.nowPlayVideoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
  data() {
    return {
      postId: null,
      nowPlayVideoUrl:
        "https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",
      options: {
        autoplay: false, // 设置自动播放
        controls: true, // 显示播放的控件
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initVideo(this.now);
    });
  },
  created() {
    this.postId = "video" + new Date().getTime().toString().substr(8);
  },
  methods: {
    initVideo() {
      let myPlyer = Videojs(
        this.postId,
        this.options,
        function onPlayerReady() {
          console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
          console.log(myPlyer === this); // 这里返回的是true
        }
      );
    },
  },
};
</script>
<style lang="scss">
.video-js {
  width: 200px;
  height: 100px;
  .vjs-big-play-button {
    top: 0;
    left: 0;
    transform: translate(50%, 50%);
  }
}
</style>

 

 多个视频

<template>
  <div class="test-videojs">
    <!-- <video id="videoPlayer" class="video-js" muted></video> -->
    <div v-for="(item,index) in audios" :key="index">
      {{item.id}}
       <video :id="'videoPlayer'+item.id" class="video-js" controls preload="none" 
         poster="http://vjs.zencdn.net/v/oceans.png"
         :options="options"
         >
     <source :src="item.now" type="application/x-mpegURL">
  </video>
    </div>
    
  </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs 
export default {
  data() {
    return {
    //  https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段视频，可将cctv1 （是live现场直播，不能快退）的替换为它，看到快进快退的效果
      nowPlayVideoUrl: "https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",
      audios:[
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:1},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:2},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:3},
        {   now:"https://cdn.ele-ai.com/a508ce6eba844e94a1d2ad8db2d89f52/a6dac44e8a5e4a0eb602931e0d23d6d2-3ba621fa011bce0dfe4663431a532187-ld.m3u8",id:4},
      ],
      options:{
        autoplay: false, // 设置自动播放
        controls: true, // 显示播放的控件
      }
    };
  },
  mounted() {
       this.$nextTick(() => {
      this.initVideo(this.now);
    });
  },
  methods: {
    initVideo() {
      // videojs的第一个参数表示的是，文档中video的id
    this.audios.forEach((item,index)=>{
       let myPlyer = Videojs("videoPlayer"+item.id, this.options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
        console.log(myPlyer === this); // 这里返回的是true
      });
    }) 
    }
  }
};
</script>
<style lang="scss">
#videoPlayer {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}
</style>