微信小程序中vidoe的使用经验

第一次看到video发现官方的文档写的繁杂难懂，所以在弄懂video组件的同时，记录了这篇文章

一打开微信官方文档的video组件就提到了同层渲染跟wx.createVideoContext那么这两个东西是什么呢？

同层渲染的来源：小程序当中有一类特殊的内置组件——原生组件，这类组件有别于 WebView 渲染的内置组件，他们是交由原生客户端渲染的。原生组件作为 Webview 的补充，为小程序带来了更丰富的特性和更高的性能，但同时由于脱离 Webview 渲染也给开发者带来了不小的困扰。在小程序引入「同层渲染」之前，原生组件的层级总是最高，不受 z-index 属性的控制，无法与 view、image 等内置组件相互覆盖， cover-view 和 cover-image 组件的出现一定程度上缓解了覆盖的问题，同时为了让原生组件能被嵌套在 swiper、scroll-view 等容器内，小程序在过去也推出了一些临时的解决方案。但随着小程序生态的发展，开发者对原生组件的使用场景不断扩大，原生组件的这些问题也日趋显现，为了彻底解决原生组件带来的种种限制，我们对小程序原生组件进行了一次重构，引入了「同层渲染」。

什么是「同层渲染」?

那么「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此时「原生组件层」已经不存在，原生组件此时已被直接挂载到 WebView 节点上。你几乎可以像使用非原生组件一样去使用「同层渲染」的原生组件，比如使用 view、image 覆盖原生组件、使用 z-index 指定原生组件的层级、把原生组件放置在 scroll-view、swiper、movable-view 等容器内，通过 WXSS 设置原生组件的样式等等。启用「同层渲染」之后的界面层级如下图所示：

wx.createVideoContext又是干什么的呢？

小程序官方页面一：VideoContext 实例，可通过 wx.createVideoContext 获取。VideoContext 通过 id 跟一个 video 组件绑定，操作对应的 video 组件。

官方页面二介绍：wx.createVideoContext，创建 video 上下文 VideoContext 对象。建议使用 wx.createSelectorQuery 获取 context 对象。

官方页面三又介绍：wx.createSelectorQuery()返回一个 SelectorQuery 对象实例。

官方页面四介绍：SelectorQuery查询节点信息的对象

我真的是有强迫症啊啊啊，你就不能统一点写嘛，直白一点写嘛，到一个概念页面上嘛，其实上面这些话就是告诉我们以下三个信息
1.wx.createVideoContext创建VideoContext对象。
2.VideoContext通过id控制video组件。
3.wx.createSelectorQuery创建SelectorQuery对象，SelectorQuery用来获取节点。

下面我们用代码来感受一下上面的信息，简直是一目了然

//在 video 设一个 id
let videoContext = wx.createVideoContext('myVideo', this)
//1.创建VideoContext对象
VideoContext.play()
//2.VideoContext通过id控制video组件播放视频

const query = wx.createSelectorQuery()
//3.1创建SelectorQuery对象
query.select('#myVideo')
//3.2SelectorQuery用来获取节点

那么我们再接着往下面看跳过一些组件参数，来到下面小窗特性说明

发现又有很多信息看不懂了，下面解读一下这些话

1.什么是小窗，如下图，除了小窗之外还有一个全屏，可以通过方法VideoContext.requestFullScreen(Object object)
进入全屏

2.微信小程序一个页面播放多个video，只允许一个在播放状态
找到微信播放事件，上源码了

//wxml

      
      
        
          
          某某某某某公司
        
        发布时间：0000-00-00
      

/* pages/videoMore/index.wxss */
.container{
  min-height: 100vh;
  background-color: #f5f7f6;
}
.search_box{
  width: 750rpx;
  padding: 35rpx 35rpx;
  background-color: #56d679;
  box-sizing: border-box;
}
/* 视频展示框 */
.video_box{
  padding: 15rpx 42rpx 20rpx;
}

.video_box .video_item .video{
  width: 100%;
  height: 317rpx;
  position: relative;
}
/* 视频标题 */
.video_box .video_item .bc{
  position: absolute;
  top: 0;
  width: 100%;
  height: 74rpx;
  background-color: rgba(72, 74, 77, 0.5);
}
.video_box .video_item .bc .title{
  color: white;
  font-size: 28rpx;
  line-height: 74rpx;
  padding-left: 30rpx;
}
/* 公司跟发布时间 */
.video_relation_info{
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  height: 60rpx;
  padding-bottom: 20rpx;
  align-items: center;
}
.video_relation_info .company{
  display: flex;
  justify-content: flex-start;
  width: 282rpx;
  padding: 0 6rpx;
  color: #404040;
}
.video_relation_info .company .company_pic{
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  margin-right: 14rpx;
}
.video_relation_info .time{
  padding-right: 6rpx;
  color: #999798;
}

// pages/videoMore/index.js
Page({
  data: {
    searchValue: '',
    fuzzyResultArr: [],
    videoList: [{
      uid: 1,
      title: "黄瓜技术培训视频",
      cover: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1994212087.png",
      resource: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
      show: true,
      company: "寿光汇坤商贸有限公司",
      time: "0000-00-00"
    }, {
      uid: 2,
      title: "黄瓜技术培训视频",
      cover: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1994212087.png",
      resource: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
      show: true,
      company: "寿光汇坤商贸有限公司",
      time: "0000-00-00"
    }],
  },
  fuzzyResultSearch(event){
    // 点击了某一项会把模糊数组清空
    const fuzzyResultArr = this.data.fuzzyResultArr
    const { index } = event.detail
    this.clearFuzzyArr()
    console.log('fuzzyResultArr',fuzzyResultArr[index])
    // 发起请求得到数据列表
    this.mockRequest()
  },
  clearFuzzyArr(){
    this.setData({
      fuzzyResultArr: []
    })
  },
  mockRequest(){
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner',
    });
    setTimeout(()=>{
      Toast.clear();
    },1000)
  },
  search(index){
    // 搜索操作，搜索的时候会把模糊数组清空
    this.clearFuzzyArr()
    // 发起请求得到数据列表
    this.mockRequest()
  },
  input(event){
    // 打字会把模糊数组赋值
    const { value } = event.detail
    this.setData({
      searchValue: value
    })
    console.log('触发了input')
    // 发起请求获取模糊数组
    clearTimeout(this.timeID)
    this.timeID = setTimeout(()=>{
      console.log('防抖成功')
      this.setData({
        fuzzyResultArr: this.RndNum(5)
      })
    },1000)
  },
  RndNum(n){
    var rnd=[];
    for(var i=0;i

重点就是下面这一段代码，是解决一个组件中多个视频同时播放的问题的核心代码

bindplay(e) {//视频播放事件
  ////这里的vid是视频的id
  let vid = e.currentTarget.id;
  if(this.vid !== vid && this.videoContext){
    ////关闭上一个播放的视频
    this.videoContext.stop();
  }
  this.vid = vid;
  ////创建控制视频标签的实例对象
  this.videoContext = wx.createVideoContext(this.vid,this);
}

参考文献：
https://blog.csdn.net/gwdgwd123/article/details/116532041
https://blog.csdn.net/weixin_41854372/article/details/114132552

查看作者在项目中如何使用的效果如下

image.png

源码请移步gitee：https://gitee.com/aggressiving/Catch-nong-net#catch-nong-net
或者github：https://github.com/jack-mayuan/Catch-nong-net