平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

直播拉流

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问