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>
相关推荐
猫猫不是喵喵.4 小时前
vue 路由
前端·javascript·vue.js
烛阴4 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91535 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
拉不动的猪5 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
魔云连洲6 小时前
Vue2和Vue3响应式的基本实现
开发语言·前端·javascript·vue.js
CreatorRay6 小时前
受控组件和非受控组件的区别
前端·javascript·react.js
JSON_L7 小时前
Vue 组件通信 - Ref组件通信
javascript·vue.js·ecmascript
Fri_8 小时前
Vue 使用 xlsx 插件导出 excel 文件
javascript·vue.js·excel
黑贝是条狗8 小时前
html 列表循环滚动,动态初始化字段数据
前端·javascript·html
萌萌哒草头将军9 小时前
🔥🔥🔥4 月 1 日尤雨溪突然宣布使用 Go 语言重写 Rolldown 和 Oxc!
前端·javascript·vue.js