vue中使用video.js播放rtmp流媒体

vue中使用video.js播放rtmp流媒体

首先这里要注意下载对应版本的video.js版本库，亲测5.5.3版本是比较好用的，最新版本6×以上版本对浏览器兼容性并不是很友好。

npm install video.js@5.5.3 --save

此处还应引入flash插件，播放rtmp流需要flash支持，并确保浏览器已开启允许flash的权限。

npm install --save videojs-contrib-hls

在main.js中引入css样式类

import Vue from "vue";
import App from "./App";
import 'video.js/dist/video-js.css'

在需要播放处引入video.js

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

html编写如下,这里引入了湖南卫视的rtmp地址

<template>
	<video id="videobo" ref="videoRef" style="object-fit:fill;width:100%;height:100%"  class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js" poster=".././static/image/noVideo.jpg" controls preload="auto" playsinline="true"  width='100%' height='100%'>
        <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv">
    </video>
</template>

在需要加载video标签时，写入播放事件，若在加载之前就运行，会导致videojs获取不到实例节点，控制台报错Error in created hook: "TypeError: The element or ID supplied is not valid. (videojs)

// 初始化video视频
    beginVideo (id) {
      let player = videojs(id,{
        autoplay : true,
        techOrder: ["flash"],//设置flash播放
        playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],
        notSupportedMessage: '此视频暂无法播放，检查设备状态是否正常或请查看是否安装flash'//无法播放时显示的信息
      })
      player.play();
    },

在关闭此video标签时，要把该实例销毁，否则浏览器会报错 Uncaught TypeError: this.el_.vjs_getProperty is not a function

const videoDom = this.$refs.videoRef;   //不能用document 获取节点
videojs(videoDom).dispose();