安装flv.js
npm install flv.js
页面内引入代码
<template>
<view>
<view id="myPlayer" ref="myPlayer"></view>
</view>
</template>
<script>
import flvjs from 'flv.js';
export default {
data() {
return {
enableProgressGesture: false,
autoplay: true,
showPlayBtn: false,
showCenterPlayBtn: false,
showFullscreenBtn: false,
controls: true,
windowWidth: '',
windowHeight: '',
flvPlayer: null,
player: null,
};
},
onLoad() {
this.$nextTick(() => {
this.getLivePlayer();
});
},
methods: {
getLivePlayer() {
uni.showLoading({
mask: true,
title: 'loading...'
});
// 生成需要的video 组件
// var player = document.getElementById('videoElement');
var player = document.createElement('video');
player.id = 'video';
player.style = 'width: 100%;height: 211px';
player.enableProgressGesture = this.enableProgressGesture;
player.controls = this.controls;
player.muted = true;
player.showCenterPlayBtn = this.showCenterPlayBtn;
player.showPlayBtn = this.showPlayBtn;
player.showFullscreenBtn = this.showFullscreenBtn;
player.x5VideoPlayerType = 'h5-page';
player.x5VideoPlayerFullscreen = 'false';
player.autoplay = this.autoplay; // 以上均为 video标签的属性配置
document.getElementById('myPlayer').appendChild(player);
console.log(player);
console.log(flvjs.isSupported());
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true, //<====直播的话,加个这个
url: ''//直播流地址
});
this.flvPlayer.attachMediaElement(player);
this.flvPlayer.load(); //加载
setTimeout(() => {
var player2 = document.createElement('video');
player2.play();
}, 2000);
this.player = player;
this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
console.log('播放错误');
this.flv_destroy();
});
uni.hideLoading();
}
},
flv_start() {
//开始
console.log(this.player);
this.player.play();
},
flv_pause() {
//暂停
this.player.pause();
},
flv_destroy() {
//停止
this.player.pause();
this.player.unload();
this.player.detachMediaElement();
this.player.destroy();
this.player = null;
},
flv_seekto() {
// 复制其他人的 我还没用这个
this.player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
}
};
</script>
<style lang="scss"></style>