vue中播放flv流视频
vue中播放flv流视频
·
1、安装环境
npm install video.js
npm install flv.js
2、引入video,在main.js中引入
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;
3、在播放flv流视频代码如下
<template>
<div class="wrapper">
<video id="videoElement" controls autoplay muted width="800px" height="600px">
</video>
<button @click="play">播放</button>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
data() {
return {
player: null,
}
},
mounted() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'http://192.168.1.212/hdl/hlsram/live1.flv'
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
methods: {
play() {
this.flvPlayer.play();
}
},
beforeDestroy() {
// 播放器存在清除播放器
if (this.player) {
this.player.destroy()
}
}
}
</script>
<style scoped>
.wrapper {
width: 800px;
height: 600px;
margin: 100px 30px;
overflow: hidden;
position: relative;
}
.iframe {
width: 1024px;
height: 608px;
position: absolute;
top: -150px;
left: -120px;
}
</style>
效果图,本身电脑的原因存在延迟比较高
参考地址:
更多推荐
已为社区贡献3条内容
所有评论(0)