VUE实现加载HLS数据流

因为需要对接监控，在网上找了很多文章参考，都会报错，本文附上一篇实测有效的组件

装载video.js

npm install --save video.js

支持HLS

npm install --save videojs-contrib-hls    

代码实例

<template>
  
  <div class="input_video">
    <video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" disablePictureInPicture
      style="width: 100%; height: 100%; object-fit: fill" autoplay muted>video>
  div>
template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";

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

export default {
  props: [ // 接收父组件的数据
    'url'
  ],
  data() {
    return {
      videoPlayer: null,
      options: {
        controls: true,
        preload: 'none',
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        playbackRates: [0.5, 1, 1.5, 2, 2.5, 3]
      }
    };
  },
  created() {
    console.info("视频流地址" + this.url)
  },
  mounted() {
    this.initVideo();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    initVideo() {
      var myPlayer = videojs('myvideo', this.options, function onPlayerReady() {
        this.on('error', function () {
          // 报错信息
          var mediaError = this.error()
          console.log('mediaError', mediaError)
          myPlayer.createModal(mediaError.message);
        })
      })
      myPlayer.src([
        {
          type: "application/x-mpegURL",
          src: this.url //CCTV3频道
        }
      ]);
      myPlayer.play();
      this.videoPlayer = myPlayer;
    },
    setVideoPlay(url) {
      this.videoPlayer.src([
        {
          type: "application/x-mpegURL",
          src: url //CCTV3频道
        }
      ]);
      this.videoPlayer.play();
    },
    suspended(){
      this.videoPlayer.pause();//暂停
    }

  },
};
script>
<style>
.input_video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
style>

调用Demo

<template>
    <div class="body_div">
        <Videoplayer class="video" ref="videoplayer" :url="url">Videoplayer>
        <el-input v-model="input" placeholder="请输入流地址">el-input>
        <el-button type="success" @click="play()">播放流文件el-button>
    div>
template>
  
<script>
import Videoplayer from '@/components/Video';
export default {
    name: 'Hlsplayer',
    components: {
        Videoplayer
    },
    data() {
        // http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
        return {
            url: "",
            input: ""
        };
    },
    created() {
    },
    beforeDestroy() {

    },
    methods: {
        play() {
            this.$refs.videoplayer.setVideoPlay(this.input)
        }
    }
}
script>
<style scoped>
.body_div {
    width: 100vw;
    height: 100vh;
    background-color: #081135;
}

.video {
    width: 50vw;
    height: 50vh;
}
style>

src type类型

type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目