首页 > 编程知识 正文

uniapp短视频源码,h5页面调用摄像头

时间:2023-05-05 19:15:19 阅读:143441 作者:694

因为测试是实机测试,所以无法测试微信开发者工具

视频支持

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也不行,在全屏显示后会被复盖,最后只能打开附属的全屏

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。