uniapp video @timeupdate监听 监听秒数 为什么会从 null一下
时间: 2024-04-16 07:24:00 浏览: 59
在 UniApp 中,当使用 `@timeupdate` 监听视频播放器的时间更新时,可能会出现从 `null` 一下的情况。这是因为视频播放器的时间更新事件是异步的,当视频开始播放之前,时间会被初始化为 `null`,然后在视频播放过程中才会不断更新时间。因此,在视频刚开始播放时,可能会出现从 `null` 到第一个时间的跳变。
要解决这个问题,你可以在 `@timeupdate` 监听事件中添加一个判断条件,判断时间是否为 `null`,如果是的话可以将其忽略或进行相应的处理。例如:
```html
<video src="your-video-source" @timeupdate="handleTimeUpdate"></video>
```
```javascript
export default {
methods: {
handleTimeUpdate(e) {
if (e.target.currentTime === null) {
// 时间为 null,忽略或进行处理
return;
}
// 处理视频时间更新
}
}
}
```
通过添加判断条件,你可以避免从 `null` 一下的情况对你的代码逻辑造成影响。
相关问题
vue使用video播放视频
在Vue中使用video播放视频可以按照以下步骤进行:
1. 首先,你需要安装vue-video-player插件。你可以通过运行"npm install vue-video-player -S"命令来安装该插件。
2. 在你的Vue组件中,你可以使用video标签来添加视频播放器。你可以设置isShow属性来动态展示或隐藏视频滚动条,并使用css样式来自定义视频播放器的外观。
3. 为了禁止视频下载,你可以在video标签中添加"οncοntextmenu=“return false”"属性。
4. 要监听视频播放进度,你可以使用video标签的"@timeupdate=“timeupdate”"方法。
5. 你还可以使用Vue的ref属性将video标签与监听事件绑定,以实现其他功能,例如时长统计、延迟提示、动态显示图标播放按钮等功能。
请注意,如果视频无法播放,你可以通过设置"notSupportedMessage"属性来自定义显示的默认信息。
请参考以下示例代码来使用video播放视频:
```
<template>
<div>
<video ref="videoPlayer" :isShow="showScrollbar" @timeupdate="timeupdate" controls>
<source :src="videoUrl" type="video/mp4">
</video>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: 'your-video-url.mp4',
showScrollbar: true
}
},
methods: {
timeupdate() {
// 处理视频播放进度的逻辑
}
}
}
</script>
<style scoped>
/* 自定义样式 */
</style>
```
请根据你的需求和具体情况进行适当的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue 使用 video 标签实现视频播放](https://blog.csdn.net/BradyCC/article/details/106434961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [视频播放:vue使用vue-video-player插件](https://blog.csdn.net/provence_20/article/details/103461398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
video标签在vue3的用法
在Vue3中,使用video标签实现视频播放可以按照以下步骤进行:
1. 首先,引入video标签以及要播放的视频源。可以在Vue组件的template中添加video标签,设置src属性为视频的URL地址。
2. 使用isShow属性配合css样式动态展示视频滚动条。可以通过给video标签添加一个class,然后在CSS中设置该class的样式来实现。
3. 使用video标签的`οncοntextmenu="return false"`属性来实现禁止下载。这将禁用右键菜单,防止用户下载视频。
4. 使用video标签的`@timeupdate="timeupdate"`方法来监听视频播放进度。可以在Vue组件中定义一个`timeupdate`方法来处理视频播放进度更新的逻辑。
5. 使用Vue的ref属性为video标签绑定监听事件,以实现其他功能,如时长统计、延迟提示、动态显示图标播放按钮等功能。可以在Vue组件中使用`ref`来获取video标签的DOM元素,并在mounted钩子中绑定事件监听。
综上所述,可以根据以上引用的内容和步骤来使用video标签实现视频播放的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue如何使用video标签实现视频播放](https://blog.csdn.net/weixin_43611804/article/details/126010047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)