平台兼容性

uni-app

uni-app x

直播拉流

uni官方说 5+app中video标签可用于rtmp地址播放 但实测时 效果并不理想

此模板是基于 本人发布的直播推流模板 编写的 ps：直播推流控件看这里：https://ext.dcloud.net.cn/plugin?id=226

好用的话 给个好评吧

如需更强大而功能看这里：https://ext.dcloud.net.cn/plugin?id=388

video视频官方播放格式说明：
H5平台：<video/> 支持三种视频格式：mp4、webm 和 ogg，由于各浏览器兼容不一致，建议均使用 mp4 格式的视频（<video/> 组件编译到 H5 时会替换为标准 html 的 vidoe 标签）。
小程序平台： <video/> 支持本地视频(mp4)、网络视频地址（mp4）。
App平台： <video/> 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

可采用以下代码改善：

    data() {
        return {
            currentWebview:null,
            pusher:null,
            livepushurl:'',

        }
    },

    getwebview(){
        var pages = getCurrentPages();
        var page = pages[pages.length - 1];
        // #ifdef APP-PLUS
        var getcurrentWebview = page.$getAppWebview();
        console.log(this.pages)
        console.log(this.page)
        console.log(JSON.stringify(page.$getAppWebview()))
        this.currentWebview=getcurrentWebview;
        // #endif
        this.liveReady()//创建LivePusher对象
    }
    liveReady(){                
        // 创建直播拉流控件
        this.pushers =new plus.video.VideoPlayer('video',{
            src:'',//rtmp播放地址
            top:'0px',
            left:'0px',
            controls:false,
            width: '100%',
            height: uni.getSystemInfoSync().windowHeight-150 + 'px',
            position: 'static'      
        });

        this.currentWebview.append(this.pushers);
        this.pushers.play()
        // 监听状态变化事件  
        this.pusher.addEventListener('statechange',(e)=>{
            console.log('statechange: '+JSON.stringify(e));
        }, false);
    },

    /**
    *  设置拉流地址此方法可以动态更改rtmp地址
    **/

    this.pusher.setOptions({
        url:this.livepushurl
    });

    /**
    *拉流播放
    */
    this.pushers.play()