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 APP-PLUS -->
<video id="myVideo" :src="url" autoplay :controls="btnToggle">
　　<!-- <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
　　退出全屏
　　</cover-view>-->
　　<!-- <view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
　　退出全屏
　　</view> -->
</video>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<live-player id="live-video" :src="url" autoplay>
　　<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
　　退出全屏
　　</cover-view>
</live-player>
<!-- #endif -->

小程序下覆蓋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-WEIXIN
                    this.videoContext = uni.createLivePlayerContext('live-video');
                    this.videoContext.requestFullScreen({direction:90});
                    this.btnToggle=true;
                // #endif
            },
            // 退出全屏
            quitFullScreen(){
                // #ifdef APP-PLUS
                    this.videoContext = uni.createVideoContext('myVideo');
                    // 進入全屏狀態
                    this.videoContext.exitFullScreen();
                    this.btnToggle=false;
                    // const subNvue=uni.getSubNVueById('popup');
                    // subNvue.hide() //隱藏
                // #endif
                // #ifdef MP-WEIXIN
                    this.videoContext = uni.createLivePlayerContext('live-video');
                    this.videoContext.exitFullScreen();
                    this.btnToggle=false;
                // #endif
            },

 

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

app中video想實現一樣的全屏顯示退出按鈕效果不成功，沒全屏可以顯示，使用nvue也不行，全屏之后被覆蓋，最后只能打開了自帶的全屏