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>
相关推荐
游离状态的猫129 分钟前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中30 分钟前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
滿1 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj1 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝1 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3112 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾2 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路2 小时前
javaScript--数据结构和算法
javascript·数据结构·算法
拉不动的猪2 小时前
# 移动端与PC端全屏的处理
前端·javascript·面试
局外人LZ3 小时前
WXT+Vue3+sass+antd+vite搭建项目开发chrome插件
前端·chrome·vue·sass