wxParse多数据循环与视频处理

1、 js

data:{    embedTemArray:[]    }


for (let i = 0; i < res.data.list.length; i++) {
  WxParse.wxParse('embed' + i, 'html', res.data.list[i].content, that);
    if (i === res.data.list.length - 1) {
      WxParse.wxParseTemArray("embedTemArray", 'embed', res.data.list.length, that)
    }
  }

wxml

<import src="../../utils/wxParse/wxParse.wxml"/>

<block wx:for="{{embedTemArray}}" wx:key="">
    <template is="wxParse" data="{{wxParseData:item}}"/>
</block>

这样就可以显示出来了，但是如果当中含有视频格式的话就需要将embed换成video，否则无法显示

wxParse文件夹里的html2json.js的HTMLParser方法里面添加

            //处理embed换成video
          if (node.tag == "embed") {
            var embUrl = node.attr.src;
            if (node.attr.src.indexOf('http:') == -1) {
              embUrl = node.attr.src;
            }
            node.attr.src = embUrl;
            node.tag = 'video';
          }

2、欢迎回来，你是不是发现又有个坑，因为你发现点击的时候视频无法停下来，导致一旦视频多起来的话就会很吵，这时候就需要

wxml

<block wx:for="{{embedTemArray}}" wx:key="">
    <!-- <template is="wxParseVideo" data="{{item}}"/> -->
    <video id="video{{index}}" danmu-btn="{{true}}" custom-cache='{{false}}' bindplay="play" autoplay="{{index==0?true:false}}" data-id="{{index}}" style="width:100vw" class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item[0].attr.src}}"></video>
</block>

data:{    stopVideo:0,//需要停止的视频    }

  play(e){
    // createVideoContext的stop方法在开发者工具停止无效，但真机上有效,所以不要惊讶,或者用oause()
    // 由于自动播放第一个,所以第一个停止的id肯定是是video0，这里算是偷个懒，你想可以优化下
    if (index != this.data.stopVideo){
      wx.createVideoContext("video" + this.data.stopVideo).pause()
    }
    this.setData({
      stopVideo:e.currentTarget.dataset.id
    })
  },

3、我胡汉三又回来了，该死的video控件，使用vw的话全屏后返回竟然会出现宽度失控的情况，只能添加一个获取屏幕宽度来做了

wxml

style="width:{{windowWidth}}px"

data:{windowWidth:0}

onLoad(){
    this.getSystem()
}

getSystem(){
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowWidth: res.windowWidth
        })
      }
    })
  },

来源：CSDN

作者：chaosama

链接：https://blog.csdn.net/chaosama/article/details/103765572

标签

video

data

embed