首页 前端知识 uni-app H5使用flv.js直播拉流

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

2024-02-09 20:02:15 前端知识 前端哥 523 522 我要收藏
  1. 安装flv.js

npm install flv.js
  1. 页面内引入代码

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1604.html
评论
发布的文章

CSS样式变换效果及动画

2024-02-23 11:02:51

实现 抽屉效果 css3

2024-02-23 11:02:47

jQuery (JavaScript)进阶使用

2024-02-23 11:02:59

CSS样式

2024-02-23 11:02:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!