平台兼容性
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()