标签：vue m3u8 页面 js video import 播放 true videojs

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。