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 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目、百度小程序类目），审核通过后在各家小程序管理后台自助开通该组件权限。

<!-- #ifdef H5 -->
<view id="myPlayer" class="video" />
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<video
class="video"
v-if="videoSrc"
:src="videoSrc"
:autoplay="true"
:controls="false"
:show-fullscreen-btn="false"
:show-play-btn="false"
:show-center-play-btn="false">
</video>

<!-- #endif -->

//如果是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小