修改wxparse的源码
1.支持iframe的转化
首先在html2json.js文件中支持iframe的转化,因为小程序默认就不支持iframe所以在源码中并没有iframe的转化,需要我们自己添加
可以看到之前源码对于img标签的处理,我们就照猫画虎对于iframe进行处理
并取出有效的vid以便之后的程序视频插件使用。
html2json.js文件修改:
. . .
//对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的地址,取出vid并放入数据中,
if(node.tag === 'iframe') {
// safeGetValue 只是一个取值的函数,可自行编写自己的取值函数。
node.vid = safeGetValue([1], node.attr.src.match(/https:\/\/v\.qq\.com.*vid=(\w*)/))
}
. . .
// 此函数作用类似于ramda的path和pathOr,用于安全取值。
function safeGetValue() {
const argsLength = arguments.length
if (argsLength !== 2 && argsLength !== 3) {
throw '必须为两个或者三个参数'
}
var defaultValue
if (argsLength === 3) {
var [_defaultValue, keys, item] = arguments
defaultValue = _defaultValue
} else {
var [keys, item] = arguments
}
if (!Array.isArray(keys)) {
throw '参数有误,取值的keys必须为数组'
}
try {
keys.forEach(key => {
item = item[key]
})
} catch (e) {
return defaultValue
}
return item
}
2.在wxParse.wxml添加腾讯视频插件的模板
实际在 tmpl.wxml下添加
在html2json中保存的vid属性,在这时有了用处
<template name="wxParserVideo">
<view class="{{item.classStr}} wxParser-{{item.tag}}" style="{{item.styleStr}}">
<video class="{{item.classStr}} wxParser-{{item.tag}}-video" src="{{item.attr.src}}"
controls="{{item.attr.controls}}" autoplay="{{item.attr.autoplay}}" loop="{{item.attr.loop}}"
muted="{{item.attr.muted}}">
</video>
</view>
</template>
// 增加腾讯视频插件模板
<template name="wxPraseIframe2TencentVideoPlugin">
<txv-video width="100%" playerid="txv{{item.vid}}" vid="{{item.vid}}" autoplay="{{item.attr.autoplay}}">
</txv-video>
</template>
3.修改wxParse.wxml的循环模板,添加视频插件的模板
中间的腾讯视频插件正是我们需要添加的。
ps: 循环模板在源码中有20个,需要我们把每一个循环模板中都添加插件,这样才能保证你的视频能够正常播放。
<template name="wxParse0">
<!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block>
<!-- 放这个即可 大概有20处 -->
<!--腾讯视频插件-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe2TencentVideoPlugin" data="{{item}}" />
</block>
<!--img类型-->
<block wx:elif="{{item.tag == 'img'}}">
<template is="wxParseImg" data="{{item}}" />
</block>
</template>
4.记得引入腾讯视频插件
在小程序后台 设置=》第三方设置 =》 添加插件 (腾讯视频)
在 app.json中引用插件
在wxParse.json引入
"usingComponents": {
"txv-video":"plugin://tencentvideo/video"
}