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小

uni-app 和H5页面视频播放flv格式视频监控相关推荐

uniApp 实现微信小程序和app视频播放flv格式视频监控
测试要在真机测试,微信开发者工具不能测试 video 支持 App平台: 支持本地视频(mp4/flv).网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp). 小程序: l ...
在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
html5微信视频无法播放视频教程,解决微信h5页面视频播放问题实例
解决微信h5页面视频播放问题实例 content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale= ...
app 嵌套h5页面问题
1.app与h5页面方法监听与参数传递 2.Android webview 如何打开本地存储,提供给JS调用 html5 的lwindow.localStorage功能,还有其他的权限 3.Andro ...
Swift5+WkWebView实现APP嵌套H5页面
Swift5+WkWebView实现APP嵌套H5页面前言一.Swift5和JS交互 1.类型一:有返回值 2.类型二:无返回值 3.app回调js方法二.Swift5修改JS的window.a ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
flv格式视频怎么转换成mp4
在我们使用视频文件的时候,不免有遇到flv格式的时候,这是一种具有版权保护的视频格式,其特点是体积小,加载的速度快,很适用于在网络上传输分享.但是flv格式的兼容性,却给很多人带来了无法播放视频文件的 ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...

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

uni-app 和H5页面视频播放flv格式视频监控相关推荐

最新文章

热门文章