vue + video.js/videojs-contrib-hls 实现hls拉流播放

videojs-contrib-hls拉流播放

主要是因为之前使用西瓜播放器插件实现hls拉流播放时，安卓手机是正常的，但是苹果一直打转，pc端的话https格式也播放不来，pc端的话去掉s改为http即可进行播放

步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)

npm i videojs-contrib-hls --save

npm i video.js --save

步骤2. main中引入video-js.css

import 'video.js/dist/video-js.css'; // video.js样式

步骤3.vue页面代码

<template>
      <div class="viedo" v-show="status == 4">
        <video
          id="my-video"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          width="375"
          height="200"
          :poster="coverpic"
        >
          <source
            v-show="hlsDownAddress"
            :src="hlsDownAddress"
            type="application/x-mpegURL"
          />
        </video>
      </div>
    </template>

步骤4.在使用的页面中引入videojs-contrib-hls和video.js

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

步骤5.在data中先定义一下

data(){
	return{
	 player: null,
  }
}

步骤6.methos中写配置

methods:{
	 getVideo() {
      this.player = videojs(
        'my-video',
        {
          bigPlayButton: true, // 显示播放按钮
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true, // 显示控件
        },
        function() {
          if (this.hlsDownAddress) {
            this.play();
          }
        }
      );
    }
}

步骤7.在挂载方法使用

mounted(){
   // 延迟一秒来唤起播放器
    this.timers = setTimeout(() => {
      that.$nextTick(() => {
        that.getVideo();
      });
    }, 1000);
}

步骤8.页面关闭的时候销毁

  beforeDestroy() {
    this.player.dispose(); // 关闭控件
  },

好啦，赶紧测试一下吧，有什么问题的话，可以一起探讨哈，觉得还不错的话，可以点点关注，一键三连啊