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>
相关推荐
im_AMBER20 分钟前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界26 分钟前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
东东2332 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
岁月宁静3 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
atwednesday3 小时前
日志处理
javascript
#做一个清醒的人3 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪3 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
rit84324993 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6
摸鱼的春哥4 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
webxin6664 小时前
页面动画和延迟加载动画的实现
前端·javascript