小程序里插入播放腾讯视频

效果图

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

内容管理后台界面

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

第一，在小程序管理平台https://mp.weixin.qq.com，在第三方设置中，添加插件“腾讯视频”，如下图：

小程序管理平台

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

使用说明 app.json代码段 文章内容页.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属性，在这时有了用处

<template name="wxPraseIframe2TencentVideoPlugin">
  <view style="margin: 20rpx 0">
    <txv-video
      width="100%"
      height="600rpx"
      playerid="txv1"
      vid="{{item.vid}}"
      autoplay="{{false}}"
    >
    </txv-video>
  </view>
</template>

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

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

ps: 循环模板在源码中有10个，甚至更多，所以需要我们把每一个循环模板中都添加插件，这样才能保证你的视频能够正常播放。

<template name="wxParse0">

 <!--video类型-->
    <block wx:elif="{{item.tag == 'video'}}">
      <template is="wxParseVideo" data="{{item}}" />
    </block>

   <!--腾讯视频插件-->
    <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>

当这些都配置完成后，就可以在详情页面播放腾讯视频了

（注：第二，引用自https://www.jianshu.com/p/074d6f8e6083）