小程序播放iframe中的腾讯视频

公司最近推出了自己的小程序,但是在详情页面嵌入html标签的时候出现了技术难题,其中一条就是在详情页面播放腾讯视频。在网页端的视频处理,就是直接嵌入腾讯视频的官方iframe,但是在小程序端这就出现了困难。

因为需要有播放视频的需求,所以小程序的官方组件 rich-text就不能用。所以只能使用wxparse,但是即便是wxparse本身也是不支持iframe标签的。

所以我们只能修改wxparse本身的代码。

修改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个,甚至更多,所以需要我们把每一个循环模板中都添加插件,也就是说在wxParse1-20中(我们公司需要最多展示20层嵌套的html标签,所以是20个)都要添加,这样才能保证你的视频能够正常播放。


<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>



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

推荐阅读更多精彩内容

  • 每天小花妈妈9点左右准时把小花送进园来,跟妈妈分离时有些难过,老师安抚情绪,小花的情绪一天比一天减少,跟老师的连接...
    纯然儿童之家阅读 72评论 0 0
  • 独游汴梁怀寄 作者/稻香居主人 四千馀载事悠悠,大邑通都称帝丘。 盛世繁华存画本,笙歌鼎沸定风流。 登临梁苑了疏梦...
    黄池闲鱼阅读 80评论 0 0
  • 昨天的短袖,不合时宜的上岗一天就匆匆歇了菜。整个山东半岛高温累积了一天的暖化成~风,统统送给了本地。因为这里是环...
    舍得_之间阅读 96评论 3 6