Vue怎么接入hls/m3u8的直播视频

今天小编给大家分享一下Vue怎么接入hls/m3u8的直播视频的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

播放HLS格式的视频

为什么要选择HLS格式的视频呢？因为浏览器没有办法支持播放RTSP，无法识别这种类型的视频流，RTMP格式的视频是需要借助Flash否则也是无法播放，但是Chrome 88彻底禁用Flash，于是跟同事商量选择了HLS，接下里就是踩坑的开始

安装

前端采用插件video.js

npm install --save video.js

现在下载的版本应该是7.0以上的，这个是有用的，因为这个版本以上的不需要因为安装videojs-contrib-hls插件，它是用来解析HLS视频的，但是只要你的版本在7.0以上就无需安装，直接使用

"video.js": "^7.19.2",

实现

<template>  <div>    <video      id="my-video"      class="video-js vjs-default-skin"      controls      preload="auto"      width="500px">      <source :class="lazy" data-src="class="lazy" data-srcUrl" />    </video>  </div></template><script>import videojs from "video.js";  export default {    props:{      "class="lazy" data-srcUrl":{        type:String,        default:'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'      }    },    mounted() {        this.getVideo();    },    methods:{      getVideo() {        videojs(            "my-video",            {                bigPlayButton: true,                textTrackDisplay: false,                posterImage: true,                errorDisplay: false,                controlBar: false            },            function() {                this.play();            }        );      },}  }</script>

main.js 引入样式

import 'video.js/dist/video-js.css'

以上就是“Vue怎么接入hls/m3u8的直播视频”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。