video 根据已知帧数播放视频

offsetTime是提前/延迟播放/暂停的时间 不需要的话可以去掉

javascript 复制代码
<template>
  <div>
    <div class="videobox">
      <video
        style="width: 500px; height: 300px"
        ref="videoElement"
        controls
        preload="auto"
        :src="videoBsrc"
        @loadedmetadata="handleLoadedMetadata"
        @timeupdate="handleTimeUpdate"
      >
        您的浏览器不支持视频标签。
      </video>
      <!-- 绑定帧数输入和更新函数 -->
      <el-input-number
        v-model="frameNumber"
        @change="seekVideo(frameNumber)"
      ></el-input-number>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { ref, onMounted, reactive, watch } from 'vue';
const createWayLine = ref('');

let videoBsrc = ref("您的视频.mp4");

const videoElement = ref<any>(null);
const frameNumber = ref(0); // 假设你已经有了一个帧数
const fps = ref(30); // 视频的帧率
const offsetTime = ref(); //前后推迟几秒播放/暂停
const stareIs = ref(false);
// 计算视频的当前时间,基于帧数和帧率
const calculateTimeFromFrame = (frame, fps) => {
  return (frame / fps).toFixed(2);
};

function handleTimeUpdate() {
  if (videoElement.value) {
    // 获取当前播放时间,单位是秒
    const currentTime = videoElement.value.currentTime;
    console.log('currentTime', currentTime);

    if (!isNaN(offsetTime.value) && stareIs.value) {
      return;
    }
if(!offsetTime.value){
      return
    }
    console.log(
      '要暂停:',
      offsetTime.value +
        Number(calculateTimeFromFrame(frameNumber.value, fps.value))
    );
    if (
      currentTime >=
      offsetTime.value +
        Number(calculateTimeFromFrame(frameNumber.value, fps.value))
    ) {
      videoElement.value.pause(); // 暂停视频
      stareIs.value = true;
    }else{
      // console.log("BBBBBBBBB")
      videoElement.value.play(); // 播放视频
    }
  }
}
// 更新视频位置的函数
const seekVideo = (frame: number) => {
  stareIs.value=false
  offsetTime.value = 3;
  if (videoElement.value) {
    // 转换为当前视频的第几秒
    let time = calculateTimeFromFrame(frame, fps.value); // 假设视频的帧率是30fps
    if (Number(time) > offsetTime.value) {
      time = (Number(time) - offsetTime.value).toFixed(3).toString();
    }
    videoElement.value.currentTime = time;
    // console.log("videoElement1:", videoElement.value.paused);
    setTimeout(() => {
      videoElement.value.play(); // 播放视频
    }, 100);
  }
};

// 视频元数据加载完成后,设置视频的播放速度和循环播放
const handleLoadedMetadata = () => {
  videoElement.value.playbackRate = 1; // 设置播放速度
  videoElement.value.loop = false; // 设置是否循环播放
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.videobox {
  border: 1px skyblue solid;
  width: 500px;
  height: 300px;
}
</style>
相关推荐
清幽竹客5 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8886 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
伍哥的传说9 天前
React 轻量级状态管理器Zustand
前端·javascript·react.js·小程序·前端框架·ecmascript