开发者社区 > 云存储 > 对象存储OSS > 正文

前端直传视频到OSS存储,如何获取视频的长度?获得多少秒?

现在有一个需求是上传视频,并且获取视频的总秒数,因为后台需要根据总秒数计算用户端观看的总进度,前端用的vue3写的,有没有大佬做过类似的东西?

展开
收起
游客s2spjsaqulc2s 2024-01-22 10:23:19 325 0
2 条回答
写回答
取消 提交回答
  • 从事java行业9年至今,热爱技术,热爱以博文记录日常工作,csdn博主,座右铭是:让技术不再枯燥,让每一位技术人爱上技术

    您好,对象存储OSS目前暂不支持获取上传至OSS的音视频宽高及播放时长信息。若想要获取视频信息,可尝试使用视频点播服务,其中接口GetVideoInfo可获取音视频时长。
    image.png
    或者使用第三方的ffplay、ffmpeg等与音视频服务相关的工具。

    2024-01-22 14:14:33
    赞同 展开评论 打赏
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    这个需求可以通过HTML5的File API和Media Source Extensions API来实现。首先,你需要在前端创建一个input元素来让用户选择视频文件,然后使用File API读取文件,接着使用Media Source Extensions API来获取视频的总时长。

    以下是一个简单的示例代码:

    <template>
      <div>
        <input type="file" @change="handleFileChange">
        <p v-if="videoDuration">视频总时长(秒): {{ videoDuration }}</p>
      </div>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      setup() {
        const videoDuration = ref(null);
    
        const handleFileChange = async (event) => {
          const file = event.target.files[0];
          if (!file) return;
    
          const video = document.createElement('video');
          video.src = URL.createObjectURL(file);
          await new Promise((resolve) => video.onloadedmetadata = resolve);
          videoDuration.value = video.duration;
        };
    
        return {
          videoDuration,
          handleFileChange,
        };
      },
    };
    </script>
    

    这段代码中,我们首先创建了一个input元素,当用户选择文件后,会触发handleFileChange函数。在这个函数中,我们使用File API读取用户选择的文件,然后创建一个video元素,将文件的URL设置为video元素的src属性。当video元素的metadata加载完成后,我们就可以获取到视频的总时长了。

    2024-01-22 13:11:05
    赞同 展开评论 打赏

相关产品

  • 对象存储
  • 热门讨论

    热门文章

    相关电子书

    更多
    Vue.js 在前端服务化上的探索与实践 立即下载
    阿里文娱大前端技术实践 立即下载
    前端代码是怎样智能生成的 立即下载