uniApp 实现微信小程序和app视频播放flv格式视频监控

测试要在真机测试，微信开发者工具不能测试

video 支持

App平台：支持本地视频(mp4/flv)、网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp)。
小程序：

live-player 支持

app不支持

百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式

所以决定微信小程序使用liveplayer,app中使用video

注意：使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用(微信小程序类目、百度小程序类目)，审核通过后在各家小程序管理后台自助开通该组件权限。

<video id="myVideo" :src="url" autoplay :controls="btnToggle">
　　
　　
</video>


<live-player id="live-video" :src="url" autoplay>
　　<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
　　退出全屏
　　</cover-view>
</live-player>

小程序下覆盖live-player需要使用cover-view,live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用

因为live-player 没有全屏和退出的按钮，使用使用cover-view 给他加上一个退出全屏的按钮

            // 进入全屏fullScreen(){// #ifdef APP-PLUS // const subNvue=uni.getSubNVueById('popup');   //获取// subNvue.show()  // 显示this.videoContext = uni.createVideoContext('myVideo');// 进入全屏状态this.videoContext.requestFullScreen();this.btnToggle=true;// #endif// #ifdef MP-WEIXINthis.videoContext = uni.createLivePlayerContext('live-video');this.videoContext.requestFullScreen({direction:90});this.btnToggle=true;// #endif},// 退出全屏quitFullScreen(){// #ifdef APP-PLUSthis.videoContext = uni.createVideoContext('myVideo');// 进入全屏状态this.videoContext.exitFullScreen();this.btnToggle=false;// const subNvue=uni.getSubNVueById('popup');// subNvue.hide() //隐藏// #endif// #ifdef MP-WEIXINthis.videoContext = uni.createLivePlayerContext('live-video');this.videoContext.exitFullScreen();this.btnToggle=false;// #endif},

　　另外添加全屏和退出全屏按钮

app中video想实现一样的全屏显示退出按钮效果不成功，没全屏可以显示，使用nvue也不行，全屏之后被覆盖，最后只能打开了自带的全屏

uniApp 实现微信小程序和app视频播放flv格式视频监控相关推荐

uni-app 和H5页面视频播放flv格式视频监控
本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控,主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例.应用技巧.基本知识点总结和需要注意事项, ...
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计
开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...
Java后端对接微信支付(微信小程序、APP、PC端扫码)非常全，包含查单、退款
首先我们要明确目标,我们点击微信支付官网 ,我们主要聚焦于这三种支付方式,其中JSPAI与APP主要与uniapp开发微信小程序与APP对接,而NATIVE主要与网页端扫码支付对接 1.三种支付统一 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
二手市场回收基于微信小程序和app两种应用开发uniapp
回收纸皮书籍.服装饰品.箱包鞋帽.床上用品.塑料制品.其他 ,微信小程序.app开发源码下载地址:请点击下载
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
CLI 发行uni-app到微信小程序，如何不打开微信开发者工具去进行小程序发布？
前言: 小程,赶紧把这个UI这里改一下,改完赶紧推个版本,等着测试:哎小程,这个需求客户需要这样改一下,你赶紧改一下推个版本客户等着看!!! 上面这段话相信做开发的同僚或多或少每天都在听,可是小程序的 ...
基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目
前戏某一天的夜里,敲完了代码之后便直接倒在床上睡着了,醒来时只记得梦里的一句话:"想要成为高手,就必须要大量实践,大量做项目,必须要把自己不会的东西全部吃透,不要得过且过.",猛 ...

uniApp 实现微信小程序和app视频播放flv格式视频监控

uniApp 实现微信小程序和app视频播放flv格式视频监控相关推荐

最新文章

热门文章