uni-app 和H5页面视频播放flv格式视频监控-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app 和H5页面视频播放flv格式视频监控。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文章向大家介绍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小文章来源地址https://www.toymoban.com/news/detail-403511.html

到了这里，关于uni-app 和H5页面视频播放flv格式视频监控的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！