Demo

--- theme: hydrogen highlight: a11y-light --- 更新日期： 2023-12-8 更新内容：canplaythrough 事件 **需求：由于默认的控件无法满足我们的使用需求，我们希望对自定义视频控件进行美化和简化按钮操作。** **目的：提升用户体验，使视频控件更具吸引力和易用性，满足产品的需要。** **优化：如果想用到H5上面，你需要避开的有那几个问题。** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/047caadfca9e4390aedeb88cebcb7fa1~tplv-k3u1fbpfcp-watermark.image#?w=768\&h=433\&s=211015\&e=png\&b=030303) *** # 解析video标签属性解析 | 属性 | 说明 | | ---------- | ------------------------------------------------------------------ | | `src` | 指定要播放的视频文件的 URL | | `autoplay` | 指定视频在加载完成后自动播放。可以设置为 `autoplay` | | `controls` | 显示视频的控制条，包括播放/暂停、音量控制、进度条等。可以设置为 `controls` | | `loop` | 设置视频循环播放。可以设置为 `loop` | | `muted` | 设置视频静音播放。可以设置为 `muted` | | `poster` | 指定视频封面图像的 URL，用于在视频加载之前显示 | | `preload` | 指定视频的预加载行为。可选值包括 `auto`、`metadata` 和 `none`，分别表示自动预加载、仅预加载元数据和不预加载 | | `width` | 设置视频播放区域的宽度 | | `height` | 设置视频播放区域的高度 | 事件解析： | html/React | vue | 说明 | | ------------------ | ----------------- | ---------------- | | `onloadstart` | `@loadstart` | 视频开始加载时触发 | | `onloadedmetadata` | `@loadedmetadata` | 视频的元数据加载完成时触发 | | `onloadeddata` | `@loadeddata` | 视频的第一帧数据加载完成时触发 | | `oncanplay` | `@canplay` | 视频可以开始播放时触发 | | `oncanplaythrough` | `@canplaythrough` | 视频可以完整播放时触发 | | `onplay` | `@play` | 视频开始播放时触发 | | `onpause` | `@pause` | 视频暂停播放时触发 | | `onended` | `@ended` | 视频播放结束时触发 | | `onseeking` | `@seeking ` | 视频正在寻找指定的播放位置时触发 | | `onseeked` | `@seeked ` | 视频寻找指定的播放位置完成时触发 | | `onprogress` | `@progress ` | 视频正在下载中，触发下载进度事件 | | `onerror ` | `@error ` | 视频加载或播放错误时触发 | 这些事件可以通过给 `