引言
因为公司需要对接海康威视的监控视频流,后端先后转了三种视频流的方式,感觉还挺有意思的,决定记录一下,因为刚开始写小文章,有不对的地方还请大家指出~
正文
rtmp和hls视频流格式用的是videojs。
因为要使用第三方组件库,所以我们需要去引入它到项目中,因为这里用的是最新版,所以也需要引入其辅助库,因为videojs6以上版本中将核心库和辅助库已经剥离开来。
核心库:
npm install video.js -S
辅助库:
npm install videojs-flash videojs-contrib-hls -S
videojs-flash是rtmp视频流需要的,videojs-contrib-hls是hls视频流需要的。
如果使用的是videojs6以下版本的话就不需要引入videojs-flash
我们打开Vue工程的主入口main.js进行引入
import Vue from 'vue';
...
// 引入video.js
import Video from 'video.js';
import 'video.js/dist/video-js.css'; // videojs的样式
Vue.prototype.$video = video; // 在原型上注册以便在任何地方都可以使用
rtmp
准备工作做完以后,开始播放rtmp视频流。 同样的需要在main.js里引入
同上
import 'videojs-flash'; //要播放rtmp视频流,得引入这个库
下面开始正式使用videojs库播放rtmp视频流
<template>
<div class="videoPlayer">
<video id="videoId" class="video-js vjs-default-skin vjs-big-play-centered videoDemo"> </video>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: "rtmp://ns8.indexforce.com/home/mystream",
videoPlayer: null,
};
},
mounted() {
this.getRtmp();
},
methods: {
getRtmp() {
let videoId = document.getElementById("videoId");
this.videoPlayer = this.$video(videoId, {
autoplay: true, // 是否自动播放
controls: true, // 是否显示控件
});
this.videoPlayer.src({
type: "rtmp/flv",
src: this.videoUrl,
});
},
},
//销毁video
beforeDestroy() {
if (this.videoPlayer) {
this.videoPlayer.dispose(); // dispose()会直接删除Dom元素
}
},
};
</script>
<style>
.videoDemo {
width: 500px;
height: 300px;
}
</style>
hls
hls基本上和rtmp的使用方法差不多,也是在main.js入口文件引入
同上
import hls from 'video.js-contrib-hls';
Vue.use(hls); // 要播放hls视频流这个库就派上用场了
在.vue文件中其他东西和rtmp一样,只需要修改src和type属性就行
...与rtmp一样
data() {
return {
videoUrl: "http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8",
videoPlayer: null,
};
},
mounted() {
this.getHls();
},
methods: {
getHls() {
...与rtmp一样
this.videoPlayer.src({
type: "application/x-mpegURL",
src: this.videoUrl,
});
},
},
http-flv
播放http-flv视频流需要引入flv.js。
npm install flv.js -S
这次直接在.vue文件里进行引入。
<template>
<div class="main">
<div class="videoPlayer">
<video
id="myVideo"
ref="vedioEle"
controls
autoplay
muted
width="600"
></video>
</div>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
name: "VideoPlay",
data() {
return {
videoUrl: "",
player: null,
};
},
mounted() {
this.getVideoPreview();
},
methods: {
getVideoPreview() {
// 浏览器是否支持flv
if (flvjs.isSupported()) {
var videoDom = document.getElementById("myVideo");
// 创建一个播放器实例
this.player = flvjs.createPlayer(
{
type: "flv", // 媒体类型,默认是 flv,
url: this.videoUrl, // 流地址
duration: 6000,
isLive: true, // 是否是直播流
hasAudio: false, //是否有声音
hasVideo: true,
},
{
cors: true, // 是否跨域
// 其他的配置项可以根据项目实际情况参考 api 去配置
autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
}
);
this.player.attachMediaElement(videoDom);
this.player.load();
this.player.on(
flvjs.Events.ERROR,
(errorType, errorDetail, errorInfo) => {
console.log("errorType:", errorType);
console.log("errorDetail:", errorDetail);
console.log("errorInfo:", errorInfo);
// 视频出错后销毁重新创建
if (this.player) {
this.flv_destroy();
return this.getVideoPreview();
}
}
);
} else {
this.$Message.error("不支持flv格式视频");
}
},
// 视频销毁
flv_destroy() {
let that = this;
// 销毁组件
if (that.player) {
that.player.pause();
that.player.unload();
that.player.detachMediaElement();
that.player.destroy();
that.player = null;
that.$refs.vedioEle = null;
}
},
},
beforeDestroy() {
this.flv_destroy();
},
};
</script>
<style>
.main {
width: 100%;
height: 100%;
}
.videoPlayer {
width: 600px;
}
</style>
至此就完成了rtmp、hls、http-flv视频流的简单使用了,如果想使用更加多的api,可用去上面的链接里进入官网查看哦。
非常感谢您的观看!