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>
相关推荐
编程贝多芬19 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort21 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio23 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly27 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果28 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特42 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
一枚前端小能手1 小时前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码1 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试