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>

js

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
        })
      }
    })
  },

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值