input上传视频,获取时长

const videoRef = useRef() // 绑定input

const handleUpload = async (event) => { // 上传视频
    // file 为上传的视频二进制文件
    const file = event.target.files[0]
    const { type } = file
    if (!/^video\//.test(type)) {
      Toast.info('请上传视频', 2)
      return
    }
    // 处理不能重复上传同一文件的问题
    if (videoRef.current) video.current = ''
    
    let audioElement = new Audio(URL.createObjectURL(file))

    // ios无法触发loadedmetadata,所以要静音播放
    audioElement.muted = true
    audioElement.play().then(() => audioElement.pause())
    audioElement.addEventListener('loadedmetadata', async (_event) => {
      const seconds = parseInt(audioElement.duration) // 时长为秒,小数,182.36
      console.log('----seconds', seconds)
    })
  }


<input
    className={cn.input}
    type={'file'}
    accept={'video/*'}
    ref={videoRef}
    onChange={(e) => handleUpload(e)}
  />

audio语音在ios下获取不到duration总时长问题

在处理视频上传并需要获取视频时长和生成封面时,通常可以借助一些成熟的库或工具来完成这个任务。以下是具体的步骤和技术说明: --- ### 1. **获取视频时长** - 可以通过 `FFmpeg` 或者基于 Python 的 `moviepy`、`ffprobe` 等工具读取视频文件元数据。 - 示例代码(Python + ffprobe): ```python import subprocess def get_video_duration(video_path): result = subprocess.run(['ffprobe', '-i', video_path, '-show_entries', 'format=duration', '-v', 'quiet', '-of', 'csv=%s' % ("p=0")], stdout=subprocess.PIPE, stderr=subprocess.STDOUT) duration_str = result.stdout.decode('utf-8').strip() return float(duration_str) if duration_str else None # 调用示例 video_path = "example.mp4" duration = get_video_duration(video_path) print(f"视频时长: {duration} 秒") ``` --- ### 2. **提取视频封面** 封面通常是从视频的第一帧截取,也可以指定某一时间点作为封面来源。 - 使用 FFmpeg 截取第一帧作为封面的命令: ``` ffmpeg -i input.mp4 -ss 00:00:01 -vframes 1 output.jpg ``` 其中 `-ss` 指定时间戳,表示截图的时间位置;`-vframes 1` 表示只抽取一帧。 - 如果结合 Python 实现动态生成封面: ```python import os def extract_thumbnail(video_path, thumbnail_path, time="00:00:01"): command = f"ffmpeg -i {video_path} -ss {time} -vframes 1 {thumbnail_path}" os.system(command) # 调用示例 video_path = "example.mp4" thumbnail_path = "cover.jpg" extract_thumbnail(video_path, thumbnail_path) print("封面已成功生成:", thumbnail_path) ``` --- ### 3. **集成到 COS 视频上传流程** 腾讯云 COS 提供了 SDK 来支持对象存储服务,并允许自定义上传后的回调操作。你可以将上述功能嵌入到上传过程中,在服务器端完成视频信息的解析和封面生成。 #### 流程概述: 1. 用户选择本地视频并通过前端页面上传至 COS; 2. 后台接收触发事件(如 COS 文件上传完成后通知),启动脚本分析视频属性; 3. 获取视频时长与关键帧图片路径,并保存结果返回给用户。 注意:为了保证性能优化建议尽量减少多次 IO 访问影响效率。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值