<video...><source src="abc" ></video>写法的html用mp-html后无法将视频地址abc正确地写入video标签

[smoothdvd]

使用环境

uni-app最新版 微信小程序 typescript 3.9.x mp-html 2.1.4

问题描述

<video...>写法的html用mp-html后无法将视频地址abc正确地写入video标签

复现方式

<template>
  <view class="container">
    <mpHtml
      :content="html"
      :tag-style="tagStyleObject"
      @linktap="onLinktap"
    />
  </view>
</template>

this.html = '<video controls="" loop="" poster="https://hbjt-kbw.oss-cn-hangzhou.aliyuncs.com/video_cover/2021/07/c356b567-d4dc-4e5d-8d53-0d77980651ae.png?208*327" style="width: 100%;object-fit:fill"><source src="https://hbjt-kbw.oss-cn-hangzhou.aliyuncs.com/video/2021/07/466c5470-d066-45c4-945e-eb41f60d3863.mp4" /></video>';

[jin-yufeng]

提供可复现的 demo 项目

[smoothdvd]

@jin-yufeng https://github.com/smoothdvd/demo.git

[smoothdvd]

// 处理自闭合标签
  if (close) {
    if (!this.hook(node) || config.ignoreTags[node.name]) {
      // 通过 base 标签设置主域名
      if (node.name === 'base' && !this.options.domain) {
        this.options.domain = attrs.href
      } /* #ifndef APP-PLUS-NVUE */ else if (node.name === 'source' && parent && (parent.name === 'video' || parent.name === 'audio') && attrs.src) {
        // 设置 source 标签（仅父节点为 video 或 audio 时有效）
        console.log('here has source')
        parent.src.push(attrs.src)
      } /* #endif */
      return
    }

@jin-yufeng 这段代码有问题吧
在uni-app/微信小程序环境下，解析的时候，!this.hook(node)的值是false，config.ignoreTags[node.name]的值是undefine，那么

 /* #ifndef APP-PLUS-NVUE */ else if (node.name === 'source' && parent && (parent.name === 'video' || parent.name === 'audio') && attrs.src) {
        // 设置 source 标签（仅父节点为 video 或 audio 时有效）
        console.log('here has source')
        parent.src.push(attrs.src)
      } /* #endif */

这段代码不会被执行到，标签的src属性就不会被合并到父级

[jin-yufeng]

试了一下，用 cli 命令行运行时，npm 包里的 js 文件 条件编译 不会生效，正常情况下编译到微信小程序，这段代码 是不会被编译进去的，但是这种情况下被编译进去了，导致 config.ignoreTags[node.name] 为 undefined
不过不使用 npm 是正常的，即把 dist/uni-app 中的内容拷贝到 src 中，然后引入改为 import mpHtml from '@/components/mp-html/mp-html.vue'

[arbing]

https://ask.dcloud.net.cn/question/105780

在 vue.config.js 中配置 transpileDependencies 显示转译你的依赖包

参考： https://cli.vuejs.org/zh/config/#transpiledependencies