Taro 4.0.7 Video 无法控制 controls 不展示

[alexlees]

相关平台

字节跳动小程序

复现仓库

https://github.com/alexlees/demo-bug-taro4.git 小程序基础库: 3.43.0.12 使用框架: React

复现步骤

import { View, Text, Video } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.less'

export default function Index () {
  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <View className='index'>
      <Text>Hello world!</Text>
      <View dangerouslySetInnerHTML={{__html: '123'}} />
      <Video src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4' controls={false} />
    </View>
  )
}

npm run dev

期望结果

视频不展示 controls

实际结果

无法控制 controls 不展示

环境信息

👽 Taro v4.0.7

  Taro CLI 4.0.7 environment info:
    System:
      OS: macOS 12.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v14.19.3/bin/yarn
      npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.7 => 4.0.7 
      @tarojs/components: 4.0.7 => 4.0.7 
      @tarojs/helper: 4.0.7 => 4.0.7 
      @tarojs/plugin-framework-react: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-alipay: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-h5: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-harmony-hybrid: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-jd: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-qq: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-swan: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-tt: 4.0.7 => 4.0.7 
      @tarojs/plugin-platform-weapp: 4.0.7 => 4.0.7 
      @tarojs/react: 4.0.7 => 4.0.7 
      @tarojs/runtime: 4.0.7 => 4.0.7 
      @tarojs/shared: 4.0.7 => 4.0.7 
      @tarojs/taro: 4.0.7 => 4.0.7 
      @tarojs/taro-loader: 4.0.7 => 4.0.7 
      @tarojs/webpack5-runner: 4.0.7 => 4.0.7 
      babel-preset-taro: 4.0.7 => 4.0.7 
      eslint-config-taro: 4.0.7 => 4.0.7 
      react: ^18.0.0 => 18.3.1

---

补充信息

@tarojs/shared 包设置了video模版 controls 属性默认值为 true

[alexlees]

可暂时通过 @tarojs/plugin-inject 注入 controls: '' 解决

[
  '@tarojs/plugin-inject',
  {
    components: {
      Video: {
        /**
         * 临时解决taro bug
         * @fix https://github.com/NervJS/taro/issues/16903
         * @todo ldl remove
         */
        controls: '',
      },
    },
  },
]