vue 播放m3u8格式的视频

1.下载相关包

npm install video.js --save
npm install videojs-contrib-hls --save

2.main.js 引入

import 'video.js/dist/video-js.css'

3.页面引入

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

4.页面同时播放多个视频

<el-col :span="8" v-for="(item,index) in videoList" :key="index">
      <div  class="videoitem">
          <video
              :id="'myvideo'+index"
              class="video-js vjs-default-skin vjs-big-play-centered"
              controls
              muted
              preload="auto"
              width="436"
          >
              <source :src="item.url" type="application/x-mpegURL" />
          </video>
          <div class="name">
              <div>{{item.name}} </div>
          </div>
      </div>
  </el-col>

5.JS

 data() {
        return {
             videoList:[...],   //视频播放地址
             player:[{one:''},...]  //存储初始化视频，用于退出页面时销毁video.js对象
        }
  },
 mounted() {
        this.$nextTick(()=>{
            setTimeout(() => {
                this.getVideo();
            }, 300);
        })
    },
    methods:{
         getVideo() {
            for (let i = 0; i < this.videoList.length; i++) {
                this.player[i].one = videojs("myvideo" + i, {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: true,
                        errorDisplay: false,
                        controlBar: true
                    },
                );
            }
        },
    },
    destroyed () {//页面销毁，同时也销毁video.js对象
        for (let i = 0; i < this.videoList.length; i++) {
            this.player[i].one.dispose()
        }
    },

标签：vue,m3u8,页面,js,video,import,播放,true,videojs
来源： https://blog.csdn.net/Etherege_x/article/details/120220349