我们在项目中经常遇到需要前端拿到一个视频源,播放视频,这个视频有可能是实时的或者是一个视频文件,这时仅凭H5的video标签是很难做到的,或者说播放不是不流畅的,通过多个js库比较,我发现flvjs功能还是比较全的,性能也不错,话不多说,直接上代码,代码组件是vue2.0:
<template>
<video class="video-element" :disablePictureInPicture="true" controls autoplay muted :style="styles" ref="videoElement"></video>
</template>
<script>
/**
* disablePictureInPicture
* 去掉画中画
* source:
* flv视频地址,可以是文件地址或者http链接
*/
import flvjs from 'flv.js';
export default {
name: 'FlvVideo',
props: ['source', 'styles'],
data() {
return {
flvPlayer: null,
timer: null
};
},
watch: {
source() {
this.initVideo();
}
},
mounted() {
this.initVideo();
},
beforeDestroy() {
this.destroyELe();
},
methods: {
initVideo() {
if (flvjs.isSupported() && this.source) {
const videoElement = this.$refs.videoElement;
const flvPlayer = flvjs.createPlayer({
type: 'flv', // 这里类型可用是多种比如:mp4,url直接用mp4链接即可
isLive: true,
hasAudio: false,
url: this.source
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
console.log(errorType);
console.log(errorInfo);
console.log('视频错误信息回调');
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
this.$emit('videoError', false);
}, 500);
});
// 【重要事件监听】http请求建立好后,该事件会一直监听flvjs实例
// flvPlayer.on(flvjs.Events.STATISTICS_INFO, (a) => {
// });
videoElement.addEventListener('ended', () => {
this.$emit('videoEnd', 'end');
});
this.flvPlayer = flvPlayer;
} else {
this.destroyELe();
}
},
destroyELe() {
if (this.flvPlayer) {
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer = null;
}
}
}
};
</script>
<style lang="scss" scoped>
.video-element {
width: 100%;
height: 350px;
}
.video-element-tip {
width: 260px;
line-height: 150px;
text-align: center;
font-size: 16px;
color: #fff;
}
/*全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
display: block;
}
/*进度条*/
video::-webkit-media-controls-timeline {
display: none;
}
/*观看的当前时间*/
video::-webkit-media-controls-current-time-display {
display: none;
}
/*剩余时间*/
video::-webkit-media-controls-time-remaining-display {
display: none;
}
/*音量按钮*/
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
/*音量的控制条*/
video::-webkit-media-controls-volume-slider {
display: none;
}
</style>
组件直接可用,直接复制粘贴即可,附赠video样式控制,是不是很贴心。