原生小程序实现视频监控(m3u8格式)-Toy模板网

这篇具有很好参考价值的文章主要介绍了原生小程序实现视频监控(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格式的视频，在微信开发者工具上其实是播放不了，需要点击预览在自己手机上播放即可。文章来源地址https://www.toymoban.com/news/detail-405118.html

到了这里，关于原生小程序实现视频监控(m3u8格式)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！