因为测试是实机测试,所以无法测试微信开发者工具
视频支持
App平台:支持本地视频(mp4/flv )、网络视频地址(mp4/flv/m3u8)、流媒体(rtmp/hls/rtsp )。 小程序:
即时-玩家支援
不支持APP
百度小程序支持m3u8格式; 微信小程序支持flv、rtmp格式
所以微信小程序决定使用liveplayer,app决定使用video
注意:使用live-player组件时需要小心。 发布到小程序时,必须通过每个小程序的审查。 只有指定类别的小程序才可用(微信小程序类别、百度小程序类别),审核通过后,各小程序管理后台自行开通该组件的权限。
! -- #ifdef APP-PLUS --
videoid=' my video ' : src=' URL ' autoplay : controls=' BTN toggle '
! - cover-view class=' BTN-toggle ' v-if=' BTN toggle ' @ click=' quit full screen '
结束全屏显示
/cover-view--
! - view class=' BTN-toggle ' v-if=' BTN toggle ' @ click=' quit full screen '
结束全屏显示
/view --
/video
! -- #endif --
! -- #ifdef MP-WEIXIN --
live-playerid=' live-video ' : src=' URL ' autoplay
cover-view class=' BTN-toggle ' v-if=' BTN toggle ' @ click=' quit full screen '
结束全屏显示
/cover-view
/现场-玩家
! -- #endif --
要在小程序下覆盖live-player,必须使用cover-view。 live-player是本机组件,级别高于前端组件。 请勿在scroll-view、swiper、picker-view或movable-view中使用
因为live-player没有全屏和退出按钮,所以使用cover-view向他添加一个退出全屏按钮
//全屏fullScreen ()//# ifdef app-plus//constsubnvue=uni.getsubnvuebyid ) ' popup ); //获取//subNvue.show ()//显示this.video context=uni.createvideocontext ) ' myvideo ' ); //进入全屏状态this.video context.request full screen (; this.btnToggle=true; //# endif//# ifdef MP-weixin this.video context=uni.createliveplayercontext (' live-video ' ); this.video context.request full screen ({ direction :90 } ); this.btnToggle=true; //#endif },//全屏quit full screen ((//# ifdef app-plus this.video context=uni.createvideocontext ) '我的视频this.btnToggle=false; //constsubnvue=uni.getsubnvuebyid (' popup ); //subnvue.hide(//隐藏/# endif//# ifdef MP-weixin this.video context=uni.createliveplayercontext (live-cone ) this.btnToggle=false; //#endif },另外添加全屏按钮和结束全屏按钮
在APP中,video想要实现的全屏显示结束按钮的效果不理想,无法全屏显示。 即使使用nvue也不行,在全屏显示后会被复盖,最后只能打开附属的全屏