首页uniapp中video标签播放时长

uniapp中video标签播放时长

时间: 2025-04-16 07:30:45 浏览: 33

### 获取 Video 标签的播放时长在 UniApp 中，可以通过 `video` 组件的相关事件和属性来获取视频的播放时长。具体来说，在 `<video>` 标签上绑定 `timeupdate` 事件可以在视频播放过程中定期更新当前时间和总时长。 #### HTML 结构 ```html <video :src="class_info.video_audio_url" id="myVideo" :poster="imgurl" @timeupdate="videoTimeUpdateEvent" > </video> ``` #### JavaScript 方法定义 ```javascript export default { data() { return { videoContext: {}, totalDuration: null, }; }, created() { this.videoContext = uni.createVideoContext('myVideo'); }, methods: { videoTimeUpdateEvent(e) { const currentTime = e.detail.currentTime; const duration = e.detail.duration; if (this.totalDuration === null && !isNaN(duration)) { this.totalDuration = duration; console.log('视频总时长:', this.totalDuration); } console.log(`当前播放时间: ${currentTime}, 总时长: ${duration}`); } } } ``` 通过上述方式，当页面加载完成并且视频元数据可用时，就可以捕获到视频的真实长度，并将其存储起来供后续逻辑调用[^3]。对于某些情况下可能存在的兼容性问题或是 `initial-time` 属性不生效的情况，建议确认目标平台的支持情况以及是否有其他配置项影响到了该功能的表现[^2]。

阅读全文