本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控，主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
video 支持
App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
小程序：
live-player 支持
app不支持
百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式
所以决定微信小程序使用liveplayer,app中使用video
注意：使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目、百度小程序类目），审核通过后在各家小程序管理后台自助开通该组件权限。
//如果是H5页面引入flv.js
// #ifdef H5
import flvjs from ‘flv.js’;
// #endif
//页面初始化方法也要做好判断
mounted(){
// #ifdef APP-PLUS
this.init();
// #endif
// #ifdef H5
this.$nextTick(() => {
this.getLivePlayer()
})
//#endif
}
//方法体可以全部显示出来
methods:{
//app 加载video标签内容
async init(){
let res = await api.cabine.GetCabineVideoInfoByCabinetCode({
“CabinetNo”:this.data.CabinetNo || this.data.CabinetCode
});
this.videoSrc = res.data;
},
///H5 初始化播放器
getLivePlayer() {
api.cabine.GetCabineVideoInfoByCabinetCode({
“CabinetNo”:this.data.CabinetNo || this.data.CabinetCode})
.then(res => {
this.videoSrc = res.data;// 生成需要的video 组件
// var player = document.getElementById(‘videoElement’);
// player.style = ‘width:400px;height: 500px’
var player = document.createElement(‘video’)
player.style = ‘width: 100%’
// player.enableProgressGesture = this.enableProgressGesture
// player.controls=this.controls
// player.showCenterPlayBtn=this.showCenterPlayBtn
// player.showPlayBtn=this.showPlayBtn
// player.showFullscreenBtn=this.showFullscreenBtn
// player.x5VideoPlayerType=‘h5-page’
// player.x5VideoPlayerFullscreen=“false”
// player.autoplay=this.autoplay // 以上均为 video标签的属性配置
document.getElementById(“myPlayer”).appendChild(player);
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({
type: ‘flv’,
isLive: false, //<====直播的话，加个这个
url: this.videoSrc, //<==自行修改
});
this.flvPlayer.attachMediaElement(player);
this.flvPlayer.load(); //加载
player.play()
// this.flv_start();
}
})
},
close(){
//关闭推流
api.cabine.CloseCabineVideoInfoByCabinetCode({
“CabinetNo”:this.data.CabinetNo || this.data.CabinetCode
})
this.$emit(“close”)
this.show = false;
}
},
附：
uni-app 的条件编译（APP-PLUS 、H5、MP-WEIXIN ）
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
1 #ifdef：if defined 仅在某平台存在
2 #ifndef：if not defined 除了某平台均存在
3 %PLATFORM%：平台名称
条件编译写法 说明
#ifdef APP-PLUS
需条件编译的代码 仅出现在 App 平台下的代码
#endif
#ifndef H5
需条件编译的代码 除了 H5 平台，其它平台均存在的代码
#endif
#ifdef H5 || MP-WEIXIN
需条件编译的代码 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
#endif
值 平台
APP-PLUS App
APP-PLUS-NVUE App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-QQ QQ小程序
MP-360 360小程序
MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小