Taro媒体组件video的坑

问题

我使用taro3.2，vue2来写小程序。
依据taro的媒体组件video文档传送门，马上进行ctrl cv操作

<template>
  <video
    id="video"
    src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    poster="https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg"
    initial-time="0"
    :controls="true"
    :autoplay="false"
    :loop="false"
    :muted="false"
  />
</template>

以上基本可行，但是要监听事件的时候就出问题了，根据文档，我写的是

<video
    id="video"
    src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    poster="https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg"
    initial-time="0"
    :controls="true"
    :autoplay="false"
    :loop="false"
    :muted="false"
    @onPlay="handleOnPlay"
  />

然而并不能进入回调函数，改成:on-play="handleOnPlay"试试也不行。然后在网上查找问题，找到了 一个说是把onPlay改成play就可以了，试了一下确实是这样，顿时觉得很懵逼。

其他的函数有类似的，也有不行的，比如onEnded要改成ended，onTimeUpdate要改成timeupdate,这样就可以使用了；但是也有不行的，例如onFullscreenChange就都不行。

然后查了下taro的源码传送门

发现定义的事件函数名称就是小写的

也就是说Taro的官方文档就是瞎写！！

解决办法

后来想想还是直接用原生把，至少比较靠谱一些。还好taro支持原生混合。
首先用原生小程序写个video-player的组件，video-player.json

{
  "component": true,
  "usingComponents": {}
}

video-player.wxml

<view class="video">
  <video 
    id="video" 
    src="{{videoUrl}}" 
    controls="{{false}}"
    object-fit="contain"
    show-fullscreen-btn="{{true}}"
    enable-auto-rotation='{{true}}'
    show-snapshot-button="{{true}}"
    bindplay="onPlay"
    bindtap="handleClick"
    bindtimeupdate="onTimeUpdate"
  >
  </video>
</view>

taro页面要引用这个组件的时候在页面的xxx.config.ts文件中新增usingComponents变量

export default {
  navigationBarTitleText: '视频',
  usingComponents: {
    "video-player": '../../components/video-player/video-player'
  }
}

在对应的vue页面就可以直接使用<video-player>标签了

<template>
  <view class="video-room">
    <view class="video-room-player">
      <video-player :url="videoUrl" />
    </view>
  </view>
</template>