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)
beginVideo (id) {
let player = videojs(id,{
autoplay : true,
techOrder: ["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;
videojs(videoDom).dispose();