You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在视频编辑页面检测视频是否超限时长并自定义提示?

在视频编辑页面检测视频时长并触发自定义提示

当然可以实现!默认的ImagePicker提示确实不够直观,没法告知用户具体的时长限制,我们可以通过手动获取视频时长并在编辑页面校验的方式来解决这个问题。下面分几种常用场景给你具体方案:

核心思路

  • 不依赖ImagePicker的默认时长限制,允许用户先选择视频
  • 获取所选视频的时长元数据
  • 在进入视频编辑页面时,对比视频时长与你设定的最大限制
  • 超出时触发自定义提示,明确展示具体限制值

方案1:跨平台(React Native/Expo)

如果用的是Expo或React Native,可以直接从ImagePicker的返回结果中拿到视频时长,然后在编辑页面做校验:

import { useEffect, Platform } from 'react';
import { ToastAndroid, Alert } from 'react-native';
// 也可以用更美观的第三方toast库,比如react-native-toast-message

// 设定你的最大时长,这里以30秒为例
const MAX_VIDEO_DURATION = 30 * 1000; // 单位:毫秒

const VideoEditScreen = ({ route }) => {
  // 从路由参数中获取选中的视频信息
  const selectedVideo = route.params?.selectedVideo;

  useEffect(() => {
    if (!selectedVideo) return;

    // 校验时长
    if (selectedVideo.duration > MAX_VIDEO_DURATION) {
      // 根据平台显示自定义提示
      if (Platform.OS === 'android') {
        ToastAndroid.show(
          `视频时长超过限制,最大允许时长为${MAX_VIDEO_DURATION / 1000}秒`,
          ToastAndroid.LONG
        );
      } else {
        Alert.alert(
          '时长超限',
          `视频时长超过限制,最大允许时长为${MAX_VIDEO_DURATION / 1000}秒`,
          [{ text: '知道了' }]
        );
      }
    }
  }, [selectedVideo]);

  // 你的视频编辑页面逻辑...
  return (
    // 页面内容
  );
};

注意:使用Expo ImagePicker时,不要设置videoMaxDuration参数,否则会直接拦截超长视频,我们要让用户先选中视频再做校验。

方案2:Android原生开发

在跳转至编辑页面前,先通过MediaMetadataRetriever获取视频时长,再做判断:

import android.media.MediaMetadataRetriever
import android.widget.Toast
import android.content.Intent

// 设定最大时长,30秒
val MAX_DURATION = 30 * 1000L

// 获取选中视频的URI
val videoUri = intent.data ?: return

val retriever = MediaMetadataRetriever()
try {
    retriever.setDataSource(this, videoUri)
    // 提取时长(单位:毫秒)
    val durationStr = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION)
    val videoDuration = durationStr?.toLong() ?: 0L

    if (videoDuration > MAX_DURATION) {
        // 显示自定义Toast
        Toast.makeText(
            this,
            "视频时长超过限制,最大允许时长为${MAX_DURATION / 1000}秒",
            Toast.LENGTH_LONG
        ).show()
    }
    // 跳转到视频编辑页面
    startActivity(Intent(this, VideoEditActivity::class.java).apply {
        putExtra("VIDEO_URI", videoUri)
    })
} finally {
    retriever.release()
}

方案3:iOS原生开发

通过AVAsset获取视频时长,然后在进入编辑页面前或编辑页面加载时触发提示:

import AVFoundation
import UIKit

// 设定最大时长,30秒
let MAX_DURATION = 30.0

guard let videoUrl = selectedVideoUrl else { return }
let asset = AVAsset(url: videoUrl)
let videoDuration = asset.duration.seconds

if videoDuration > MAX_DURATION {
    // 显示自定义提示框
    let alert = UIAlertController(
        title: "时长超限",
        message: "视频时长超过限制,最大允许时长为\(MAX_DURATION)秒",
        preferredStyle: .alert
    )
    alert.addAction(UIAlertAction(title: "确定", style: .default))
    present(alert, animated: true)
}

// 跳转到视频编辑页面
let editVC = VideoEditViewController()
editVC.videoUrl = videoUrl
navigationController?.pushViewController(editVC, animated: true)

这些方案都能完美替代默认的模糊提示,让用户清晰知道具体的时长限制。

内容的提问来源于stack exchange,提问作者Dipika

火山引擎 最新活动