• 请不要在回答技术问题时复制粘贴 AI 生成的内容
ChatGPTPRO
V2EX  ›  程序员

请教前端大佬: Vue 项目 demo,用了 Vant 组件,使用的是 van-uploader,我想实现:选择好视频后,想截取视频,然后再进行上传,应该怎么写呢?

  •  
  •   ChatGPTPRO · Oct 16, 2023 · 2412 views
    This topic created in 1125 days ago, the information mentioned may be changed or developed.
    以下是我的代码。


    <van-uploader :preview-full-image="false" result-type="file" accept="video/*" :max-count="1" v-model="videoCovers"
    :after-read="afterRead" @delete="onDeleteFile">
    <template #preview-cover="{ file }">
    <van-uploader class="preview-cover" :after-read="onUploadCover" style="display: flex;justify-content: center;">
    <div>选封面</div>
    </van-uploader>
    </template>
    </van-uploader>


    大佬们,就像这样,选了视频后,能够截取视频,然后上传

    8 replies  •  2023-10-16 20:00:49 +08:00
    JimmyRogue
    JimmyRogue
    Oct 16, 2023❤️1
    1
    没理解错的话。。。可以在 beforeRead 这个函数里去异步的执行裁剪相关的操作。裁剪完毕后,赋值新的视频给 fileList ,返回 resolve()即可。
    codeself
    codeself
    Oct 16, 2023❤️1
    2
    思路是这个,找 gpt 给你写具体的实现就行了

    1. van-uploader 只用于文件选择
    2. 到 npm 找个可以截取视频的包
    3. 把截取视频的结果转成 blob
    4. 通过 new FormData 的形式把你的 blob 传给后端即可
    1156909789
    1156909789
    Oct 16, 2023
    3
    那得塞个 ffmpeg 进去吧
    ChatGPTPRO
    ChatGPTPRO
    OP
    Oct 16, 2023
    4
    @codeself
    @liangtao927190 非常感谢两位大哥!
    ChatGPTPRO
    ChatGPTPRO
    OP
    Oct 16, 2023
    5
    大佬,像我上面发的图片中,这种进度选择条然后截取的,请问您知都不知道是不什么框架的啊?
    找了一圈发现,vedio.js 只支持播放,videojs-record 只支持干录制,不能选取的
    NikoXu
    NikoXu
    Oct 16, 2023
    6
    前端还能干这种事情 ?
    webszy
    webszy
    Oct 16, 2023
    7
    抖音上有个渡一前端好像讲过
    webszy
    webszy
    Oct 16, 2023
    8
    还是需要 ffmpeg ,浏览器端需要 wasm ,要不然就是后端
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1859 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 01:40 · PVG 09:40 · LAX 17:40 · JFK 20:40
    ♥ Do have faith in what you're doing.