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

当时接手拉流播放时使用的是西瓜播放器插件，神奇的是安卓手机显示正常，但是苹果一直显示加载，pc端使用https格式不能播放，但是去掉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(); // 关闭控件

  },

好了以上就是我项目中使用并完成需求的操作如有不妥请斧正

巴特西

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

最新文章

热门文章