v-timetrack

简介

用于媒体元素(video,audio)的指令，当达到指定时间时触发回调函数，支持数组形式的多个时间点。比如常见的：

视频网站的广告弹窗
音乐网站的试听

用法

通过给元素或者组件添加v-timetrack的指令实现。在这个例子中，我们在视频播放到 5 秒和结束时触发回调函数

查看代码

vue

<script setup lang="ts">
import { ref } from 'vue'
import { vTimeTrack } from '@cp-vuedir/core'
const visible = ref(false)
const videoRef = ref<HTMLVideoElement>()

const handleEnd = (time: string | number) => {
  visible.value = true
  videoRef.value?.pause()
}

const handleFiveSecond = (time: number) => {
  visible.value = true
  videoRef.value?.pause()
}

const handleOk = () => {
  visible.value = false
  videoRef.value?.play()
}
const handleCancel = () => {
  visible.value = false
  videoRef.value?.play()
}

const timeTrackOptions = [
  { time: 5000, callback: () => handleFiveSecond(5000) },
  { time: '100%', callback: () => handleEnd('100%') }
]
</script>

<template>
  <a-card>
    <video ref="videoRef" v-time-track="timeTrackOptions" controls autoplay>
      <source src="https://videos.pexels.com/video-files/856171/856171-hd_1920_1080_30fps.mp4" type="video/mp4" />
    </video>
  </a-card>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 提示 </template>
    <div>timeTrack触发，视频已暂停播放。点击确定/取消按钮继续播放。</div>
  </a-modal>
</template>

API

属性名	说明	类型	是否必选	默认值
options	配置对象数组	`option[]`	✓	[]
option	配置对象	`object`	✓	{}
time	时间点，用于在指定时间触发回掉，单位为毫秒或者百分比	`number ｜ string`	✓	0
callback	回调函数	`function`	✓	() => {}

注意事项

注意

time属性的单位为毫秒或者百分比。
回调函数的参数为当前时间点。

v-timetrack ​

简介 ​

用法 ​

API ​

注意事项 ​

v-timetrack

简介

用法

API

注意事项