uniapp video @timeupdate监听 监听秒数 为什么会从 null一下

在 UniApp 中，当使用 `@timeupdate` 监听视频播放器的时间更新时，可能会出现从 `null` 一下的情况。这是因为视频播放器的时间更新事件是异步的，当视频开始播放之前，时间会被初始化为 `null`，然后在视频播放过程中才会不断更新时间。因此，在视频刚开始播放时，可能会出现从 `null` 到第一个时间的跳变。

要解决这个问题，你可以在 `@timeupdate` 监听事件中添加一个判断条件，判断时间是否为 `null`，如果是的话可以将其忽略或进行相应的处理。例如：

<video src="your-video-source" @timeupdate="handleTimeUpdate"></video>

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 ]