在小程序中插入并播放腾讯视频

效果图

在小程序内容管理后台，直接在编辑器中输入腾讯视频的分享码即可，如图：

内容管理后台接口

小程序的文章内容页使用wxParse来解析html网页内容。 主要做以下2件事：

首先，在小程序管理平台的第三方设置中添加插件“腾讯视频”，如下图：

小程序管理平台

按照插件“详情”的使用说明处理相关页面。

使用说明

app.json 代码片段

文章内容page.json代码片段

二、修改wxparse的源码流程：

1.支持iframe转换

首先，在html2json.js文件中支持iframe转换。 因为小程序默认不支持iframe，所以源码中没有进行iframe转换。 我们需要自己添加。

可以看到之前的源码是如何处理img标签的。 我们将按照猫和老虎的例子来处理 iframe。

并取出有效的vid供后续节目视频插件使用。

html2json.js文件修改：

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的地址，取出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中添加腾讯视频插件的模板

html2json中保存的vid属性此时就有用了

3、修改wxParse.wxml的循环模板，添加视频插件的模板

中间的腾讯视频插件正是我们需要添加的。

ps：源码中有10个或更多的循环模板，所以我们需要为每个循环模板添加插件，以保证你的视频能够正常播放。

配置完成后，就可以在详情页播放腾讯视频了。

（注：二，引自）