vue框架，使用video标签如何获取视频播放结束、开始播放、暂停播放、视频长度、视频播放进度的事件监听

前言：

关于video标签的属性、css设置隐藏播放控件 已在上篇文章发布（需要可进首页翻看）

说明：

src的值应替换为自己本地的视频存放路径或者线上网络地址

一、视频播放结束的事件（vue3）

<template>
  <div>
       <!-- 这里设置成了静音、自动播放 -->
    <video autoplay muted class="video" @ended="onVideoEnded" src="test.mp4"></video>
  </div>
</template>

<script setup>
// 视频播放结束时的处理函数  
const onVideoEnded = () => {
  console.log('播放结束');
  //可在这里做视频播放结束后的处理，比如跳转新页面、显示弹框等
};

</script>

二、视频开始播放的事件（vue3）

<template>
  <div>
       <!-- 显示浏览器默认播放控件，当点击开始播放按钮时触发；如果设置了自动播放，也是生效的 -->
     <video controls class="video" @play="onVideoPlay" src="test.mp4"></video>
  </div>
</template>

<script setup>
// 视频开始播放时的处理函数  
const onVideoPlay = () => {  
  console.log('视频开始播放');  
}; 
</script>

三、视频暂停播放的事件（vue3）

<template>
  <div>
       <!-- 显示浏览器默认播放控件-->
     <video controls class="video"  @pause="onVideoPause" src="test.mp4"></video>
  </div>
</template>

<script setup>
// 视频暂停播放时的处理函数  
const onVideoPause = () => {  
  console.log('视频暂停播放');  
};  
</script>

四、获取视频长度的事件（vue3）

<template>
  <div>
       <!-- 显示浏览器默认播放控件-->
     <video controls class="video"  ref="videoElement" @loadedmetadata="onVideoLoadedMetadata" src="test.mp4"></video>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
// 获取 video 元素引用  
const videoElement = ref(null); 
// 视频元数据加载完成时的处理函数（用于获取视频长度）  
const onVideoLoadedMetadata = () => {  
  if (videoElement.value) {  
    const duration = videoElement.value.duration;  
    console.log(`视频长度: ${duration} 秒`);  
  }  
};  
  
// 在组件挂载后确保 videoElement 已被正确引用  
onMounted(() => {  
  if (videoElement.value) {  
    console.log('视频元素已挂载');  
  }  
}); 
</script>

五、获取视频播放进度的事件（vue3）

<template>
  <div>
       <!-- 显示浏览器默认播放控件-->
     <video controls class="video" @timeupdate="onTimeUpdate" src="test.mp4"></video>
  </div>
</template>

<script setup>
// 视频播放进度更新时的处理函数  
const onTimeUpdate = (event) => {  
  // event.target 是触发事件的 video 元素  
  const playedSeconds = event.target.currentTime;  
  console.log(`已播放: ${playedSeconds} 秒`);
}; 
</script>