视频帧预览
9篇文章 · 0订阅
  • 前端对视频自动抽帧生成预览轴，给一个URL即可
    最近出于个人兴趣，正在开发一个这样的视频剪辑器，等开发得差不多了，可能会开源出来。今天主要讲一讲下面轨道中的视频预览是如何实现的。 方案 获取视频时长，计算出轨道中的表示视频的这一个Item应该画多长
    Vue.js 动效 响应式编程
    前端对视频自动抽帧生成预览轴，给一个URL即可
  • 用canvas实现逐帧预览视频，并下载
    HTML 具体实现 初始化 获取具体帧画面 这个函数，能根据给定的视频文件和某一秒，生成那一秒的视频画面 时间也可以给个数组，最终返回对应的Blob和url对象 接下来需要实现genFrame函数 首
    前端 算法
    用canvas实现逐帧预览视频，并下载
  • vue实现一个鼠标滑动预览视频封面组件
    🎈不知道大家平时在逛B站的时候有没有发现这么一个功能？在视频封面移入鼠标时我们可以对视频进行预览，预览过后再决定时候要点进去观看视频，那么这个实现具体是怎么实现的呢？让我们一起动手来试一下吧。
    前端 Vue.js
    vue实现一个鼠标滑动预览视频封面组件
  • 前端webassembly+ffmpeg+web worker视频抽帧
    自定义编译ffmpeg，优化wasm文件大小，编译出不带`sharedarraybuffer`的ffmpeg.wasm+js，最后使用web worker运行截帧相关的业务代码，以防阻塞主线程。
    WebAssembly 音视频开发
    前端webassembly+ffmpeg+web worker视频抽帧
  • 前端视频帧提取 ffmpeg + Webassembly(2)
    在上一篇文章《前端视频帧提取 ffmepg + wasm》中，我们实现了通过 wasm 对视频帧进行提取的功能，并且对 ffmpeg 做了编译优化和 wasm 的加载优化。本篇继续进行深入研究和优化
    WebAssembly
    前端视频帧提取 ffmpeg + Webassembly(2)
  • 纯前端抽帧实现
    背景 最近在做业务的时候遇到了一个需要前端抽帧的需求，小小的研究了一下便记录了下来，以便复盘。 大概的需求呢就是说从页面A跳转到页面B后给你视频的url和一些时间节点，我们要抽取这个视频在这些时间节点
    前端 JavaScript 图片资源
    纯前端抽帧实现
  • 基于FFmpeg和Wasm的Web端视频截帧方案
    基于实际业务需求，介绍了自定义Wasm截帧方案的实现原理和实现方案。解决传统的基于canvas的截帧方案所存在的问题，更高效灵活的实现截帧能力。
    FFmpeg 开源
    基于FFmpeg和Wasm的Web端视频截帧方案
  • 基于WebCodecs的网页端高性能视频截帧
    web投稿页是B站的主要投稿来源，有很多高粉UP主使用web端进行投稿。WebCodecs于21年9月份推出，是用于在web页面上对音视频进行底层操纵（如编解码）的API。
    音视频开发
    基于WebCodecs的网页端高性能视频截帧
  • 看前端如何通过WebAssembly实现播放器预览能力
    最近，团队小组内部体验web浏览器上课的音视频播放功能，除了对比竞品，也对比了主流视频内容的网站平台。计划补齐和增强与播放体验相关的能力。 在鼠标进度条停留，不必跳转进度，即可展示所指画面。 在简单分析了B站、腾讯视频后，发现都是采取在上架视频时，由后台生成专门用来帧预览的组合…
    WebAssembly