微信小程序里面,对于富文本标签,我们通常使用wxparse这个插件来进行解析,可以说非常的方便。但是今天在使用的时候,遇到了iframe中是视频地址的问题。
如果是标准的视频标签。wxparse是可以正常解析的,但是如果是下面这样的形式的话,小程序是无法显示视频的。
<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://lj-1251274653.cos.ap-chengdu.myqcloud.com/ljfl.mp4"></iframe>
问题的原因就是wxparse没有对iframe标签进行解析匹配,我们需要自己修改wxparse来使它可以解析iframe标签。解决过程如下:
-
修改wxparse中的html2json.js文件,添加对iframe标签的解析。
function html2json(html, bindName) { HTMLParser(html, { start: function (tag, attrs, unary) { ... //对img添加额外数据 if (node.tag === 'img') { node.imgIndex = results.images.length; var imgUrl = node.attr.src; if(!imgUrl) { return } if (imgUrl[0] == '') { imgUrl.splice(0, 1); } imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps); node.attr.src = imgUrl; node.from = bindName; results.images.push(node); results.imageUrls.push(imgUrl); } // 处理iframe的地址 if(node.tag === 'iframe') { node.src= node.attr.src; } .....};
2.在wxParse.wxml添加iframe视频模板
<template name="wxPraseIframe"> <video id="myVideo" src="{{item.src}}" enable-danmu danmu-btn controls></video> </template>
3.在wxParse.wxml中,对循环模板添加处理。
<!--循环模版--> <template name="wxParse0"> <!--<template is="wxParse1" data="{{item}}" />--> <!--判断是否是标签节点--> <block wx:if="{{item.node == 'element'}}"> <block wx:if="{{item.tag == 'button'}}"> <button type="default" size="mini"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse1" data="{{item}}" /> </block> </button> </block> <!--li类型--> <block wx:elif="{{item.tag == 'li'}}"> <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}"> <view class="{{item.classStr}} wxParse-li-inner"> <view class="{{item.classStr}} wxParse-li-text"> <view class="{{item.classStr}} wxParse-li-circle"></view> </view> <view class="{{item.classStr}} wxParse-li-text"> <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key=""> <template is="wxParse1" data="{{item}}" /> </block> </view> </view> </view> </block> <!--video类型--> <block wx:elif="{{item.tag == 'video'}}"> <template is="wxParseVideo" data="{{item}}" /> </block> <!--iframe插件(这个是我们添加的)--> <block wx:elif="{{item.tag == 'iframe'}}"> <template is="wxPraseIframe" data="{{item}}" /> </block>
需要注意的是,循环模板可能会有很多个,比如
<template name="wxParse1">
<template name="wxParse2">
我们最好都添加上iframe的模板解析