video.js-contrib-hls拉流播放

1.下载videojs-contrib-hls依赖

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',        //播放的dom id

        {

          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(); // 关闭控件

  },