uni-app H5使用flv.js直播拉流

1. 安装flv.js

npm install flv.js复制

2. 页面内引入代码

<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>复制