文章目录
- 一、前言
- 1.1、[官网](https://docs.videojs.com/)
- 1.2、[`Github`](https://github.com/videojs/video.js)
- 二、实现
- 2.1、安装依赖
- 2.2、`main.js`
- 2.3、`video.vue`
- 2.4、其它
- 三、最后
一、前言
实时推送的视频流的需求,vue
中就可以使用video.js
播放m3u8
格式的视频流
1.1、官网
1.2、Github
二、实现
2.1、安装依赖
yarn add video.js
yarn add videojs-contrib-hls // 这是播放hls流需要的插件
yarn add videojs-flash // 这是播放rtmp流需要的插件
yarn add mux.js // 在vue项目中,若不安装它可能报错
2.2、main.js
引入如下依赖:
import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);
2.3、video.vue
抽离出来一个视频组件
<template>
<video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>
<script>
import Videojs from 'video.js'
export default {
data() {
return {
player: null
}
},
beforeDestroy() {
if (this.player) {
this.player.dispose() // Removing Players,该方法会重置videojs的内部状态并移除dom
}
},
activated() {
if (this.player) {
this.player.play()
}
},
deactivated() {
if (this.player) {
this.player.pause()
}
},
mounted() {
this.initVideo()
},
methods: {
initVideo(url) {
if (!this.player) {
this.player = Videojs('videoPlayer', {
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)
preload: 'auto', // 预加载
controls: false // 显示播放的控件
})
}
this.player.src([{
src: url,
type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
}])
}
}
}
</script>
<style lang="scss" scoped>
.video, video {
width: 100%;
height: 580px;
}
/deep/ .vjs-loading-spinner {
position: relative;
.vjs-control-text {
opacity: 0;
}
}
</style>
2.4、其它
rtmp
流的话,需再安装依赖videojs-flash
// main.js
import flash from "videojs-flash"; // 播放rtmp流需要的插件
import Vue from "vue";
Vue.use(flash);
组件中设置src
时需要注意:
this.player.src([{
src: url,
type: 'rtmp/flv' // 告诉videojs这是一个rtmp流视频
}])
三、最后
本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕