原生小程序实现视频监控(m3u8格式)

Posted 请叫我欧皇i

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生小程序实现视频监控(m3u8格式)相关的知识,希望对你有一定的参考价值。

本文主要实现实时播放监控视频,基于原生微信小程序实现

1、在.wxml文件代码,视频一定要写宽高,不然可能显示不出来,以下属性介绍

src:视频地址,

controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)

binderror: 视频播放出错时触发

show-center-play-btn:是否显示视频中间的播放按钮

enable-play-gesture:是否开启播放手势,即双击切换播放/暂停

 show-play-btn:是否显示视频底部控制栏的播放按钮

auto-pause-if-navigate:当跳转到本小程序的其他页面时,是否自动暂停本页面的视频播放

show-fullscreen-btn:是否显示全屏按钮

autoplay:自动播放

 <view class="video-box">
        <video id="myVideo" class="myVideo" src="playUrl" controls binderror="videoErrorCallback" show-center-play-btn='false' enable-play-gesture="true" show-play-btn="false" auto-pause-if-navigate="true" show-fullscreen-btn="false" autoplay="true">
        </video>
      </view>

2、js文件

data中的数据

 // 视频监控如下参数
        playUrl: '',
        videoCtx: '',

onload中数据,wx.createVideoContext:创建 video 上下文 VideoContext 对象

 this.setData(
            videoCtx: wx.createVideoContext('myVideo', this)
        )
     console.log(this.data.videoCtx, '页面加载触发数据');
//页面加载调用视频监控
this.videolink()

视频监控代码

// 视频实时监控播放
    videolink: function (event) 
        console.log(event, '点击变化实时播放');
        let that = this
        wx.request(
            url: '视频接口地址',
            data: 
//后台需要请求参数
                id: event.currentTarget.dataset.url.id
            ,
            header: 
                'content-type': 'application/x-www-form-urlencoded', //查询字符串
            ,
//请求方式
            method: 'POST',
            success(res) 
                console.log(res, '视频监控啊11111111111');
                let 
                    data
                 = res
//返回结果状态码判断
                if (res.data.status == 1)  //ok
                    // 播放监控
                    that.setData(
                        playUrl: data.data.m3u8uri,
                    )
                 else 
                
            
        )
    ,

我这里播放的是m3u8格式的视频,在微信开发者工具上其实是播放不了,需要点击预览在自己手机上播放即可。

以上是关于原生小程序实现视频监控(m3u8格式)的主要内容,如果未能解决你的问题,请参考以下文章

微信原生组件|基于小程序实现音视频通话

微信小程序可以实现数据上传功能吗

微信小程序之原生API(下)

校园外卖系统 - 「农职邦」微信原生云开发小程序

校园外卖系统 - 「农职邦」微信原生云开发小程序

uni-app技术分享| uni-app转小程序_实时音视频