当前位置： 首页 > news >正文

ffmpeg.js视频播放(转换)

news 2026/1/21 19:16:04

chrome 临时设置SharedArrayBuffer

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer

引用的js及相关文件

ffmpeg.min.js

ffmpeg.min.js.map

ffmpeg-core.js

ffmpeg-core.wasm

ffmpeg-core.worker.js

以上几个现成的文件可以在以下链接中获取

https://blog.csdn.net/jchsgwbr/article/details/143252044
https://gitee.com/CXBalCai/ffmpeg-template

视频转换速度有点慢(打开注释的两行代码即可)，视频播放可以播放大部分mp4视频，少部分mp4只能放音频（应该是代码里Blob指定了mp4格式所致）

html文件，tomcat服务启动后，作为webapp运行。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FFmpeg.js Demo</title>
    <script src="ffmpeg.min.js"></script>
</head>
<body>
    <h1>FFmpeg.js 示例</h1>
    <input type="file" id="upload" accept="video/*">
    <!-- <button id="convert">转换视频</button> -->
    <button id="convert">播放视频</button>
    <video id="output" controls></video>

    <script>
        document.getElementById('convert').onclick = async () => {
            const fileInput = document.getElementById('upload');
            const file = fileInput.files[0];
            if (!file) {
                alert('请上传一个视频文件');
                return;
            }

            const reader = new FileReader();
            reader.onload = async (event) => {
                const data = new Uint8Array(event.target.result);
                const result = await FFmpeg.createFFmpeg({ log: true });
                await result.load();
                result.FS('writeFile', 'input.mp4', data);
                //await result.run('-i', 'input.mp4', 'output.mp4');
                //const outputData = result.FS('readFile', 'output.mp4');
                const outputData = result.FS('readFile', 'input.mp4');

                const blob = new Blob([outputData.buffer], { type: 'video/mp4' });
                const url = URL.createObjectURL(blob);
                document.getElementById('output').src = url;
            };
            reader.readAsArrayBuffer(file);
        };
    </script>
</body>
</html>

相关文章：

ffmpeg.js视频播放(转换)

chrome 临时设置SharedArrayBuffer "C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-featuresSharedArrayBuffer 引用的js及相关文件 ffmpeg.min.js ffmpeg.min.js.map ffmpeg-core.js ffmpeg-core.wasm ffmpeg-core.worker.js 以上几个现…...

编程日记 2024/11/29 23:57:59

后端 Java发送邮件 JavaMail 模版 20241128测试可用

配置授权码 依赖 <dependency><groupId>javax.mail</groupId><artifactId>javax.mail-api</artifactId><version>1.5.5</version> </dependency> <dependency><groupId>com.sun.mail</groupId><artifa…...

编程日记 2024/11/29 23:53:55

电脑中的vcruntime140_1.dll文件有问题要怎么解决？一键修复vcruntime140_1.dll

遇到“vcruntime140_1.dll无法继续执行代码”的错误通常表明电脑中的vcruntime140_1.dll文件有问题。这个文件属于Visual C Redistributable&#xff0c;对很多程序的运行至关重要。本文将提供几个步骤&#xff0c;帮助你迅速修复这一错误&#xff0c;使电脑恢复正常工作状态。…...

编程日记 2024/11/29 23:50:52

探索 Vue 3.0中Treeshaking特性？

Vue 3.0 中的 Tree Shaking 特性 Tree Shaking 是一种优化技术，旨在通过静态分析代码，去除未使用的模块或函数，从而减小最终的打包文件大小。在 Vue 3.0 中，由于其模块化设计和代码按需引入的特性，Vue 的 Tree Shaking 特性得到了增强，能够有效地去除那些在生产环境中未…...

编程日记 2024/11/29 23:48:50

Paddle Inference部署推理（十）

十&#xff1a;Paddle Inference推理 &#xff08;python&#xff09;API详解 9. 启用内存优化 API定义如下&#xff1a; # 开启内存 / 显存复用&#xff0c;具体降低内存效果取决于模型结构 # 参数&#xff1a;None # 返回&#xff1a;None paddle.inference.Config.enable…...

编程日记 2024/11/29 23:47:49

万能门店小程序管理系统 doPageGetFormList SQL注入漏洞复现

0x01 产品简介 万能门店小程序管理系统是一款功能强大的工具，旨在为各行业商家提供线上线下融合的全方位解决方案。是一个集成了会员管理和会员营销两大核心功能的综合性平台。它支持多行业使用，通过后台一键切换版本，满足不同行业商家的个性化需求。该系统采用轻量后台，搭…...

编程日记 2024/11/29 23:45:46

全面＋彻底解决VMware安装后没有VMnet1和VMnet8的问题

目录 1、摘要 &#xff08;1&#xff09;问题 &#xff08;2&#xff09;所用工具 ① Everything软件 ② CCleaner软件 2、问题的检查与确认 3、解决过程 &#xff08;1&#xff09;卸载已经安装的VMware &#xff08;2&#xff09;设置services.mcs&#xff1a;服务自…...

编程日记 2024/11/29 23:42:43

什么是堆？

堆&#xff08;Heap&#xff09;&#xff1a;堆可以看做是一颗用数组实现的二叉树&#xff0c;所以它没有使用父指针或者子指针。堆根据“堆属性”来排序&#xff0c;“堆属性”决定了树中节点的位置。 堆的特性 1.堆是完全二叉树&#xff0c;除了树的最后一层节点不需要是满的…...

编程日记 2024/11/29 23:41:42

微距动物和植物摄影后期森系风格Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程 微距动物和植物摄影后期采用森系风格的 Lightroom 调色&#xff0c;将微距下的动植物世界打造成充满自然气息和梦幻感的画面。这种调色风格旨在突出动植物的细腻之美&#xff0c;同时营造出宁静、清新的森林氛围。 预设信息 调色风格&#xff1a;森系风格预设适合类…...

编程日记 2024/11/29 23:39:40

Qt6.8安卓Android开发环境配置

时隔多年&#xff0c;重拾QtCreator下Android开发。发现Qt6下安卓开发环境配置变简单不少&#xff01;只需三步即可在QtCreator下进行Android开发&#xff1a; 一、使用Qt Mantenance Tool进行Android模块的安装&#xff1a; 如果感觉安装网速较慢&#xff0c;可以查看本人另外…...

编程日记 2024/11/29 23:38:39

RK3568部署yolo8记录

本教程记录自己一下在RK3568上部署yolo8的步骤 板端驱动 在板端&#xff0c;首先查看rknpu驱动是否安装、存在。若键入下面的命令有返回则&#xff0c;证明驱动已安装。 dmesg | grep -i rknpu 瑞芯微官方说&#xff0c;驱动版本最好大于0.9.2。但是我看有的博主说&#xff…...

编程日记 2024/11/29 23:37:38

数据可视化复习2-绘制折线图+条形图（叠加条形图，并列条形图，水平条形图）+ 饼状图 + 直方图

目录 目录 一、绘制折线图 1.使用pyplot 2.使用numpy ​编辑 3.使用DataFrame ​编辑 二、绘制条形图&#xff08;柱状图&#xff09; 1.简单条形图 2.绘制叠加条形图 3.绘制并列条形图 4.水平条形图 ​编辑 三、绘制饼状图 四、绘制散点图和直方图 1.散点图 2…...

编程日记 2024/11/29 23:33:32

JavaScript原生深拷贝方法 structuredClone使用

structuredClone 简介 structuredClone 是现代浏览器提供的原生 JavaScript 方法&#xff0c;用于深拷贝对象。它可以处理各种复杂数据结构&#xff0c;包括嵌套对象、数组、Date、Map、Set 等&#xff0c;且支持循环引用。 语法 const clone structuredClone(value);value:…...

编程日记 2024/11/29 23:32:31

SpringBoot无法使用jkd8问题

1. 解决SpringBoot无法使用jdk8问题 创建一个高 jkd 版本&#xff0c;如 jkd21 在创建项目后&#xff0c;将 pom.xml中的 jdk 版本改为8&#xff0c;找到下图所在位置修改即可。 此外将 SpringBoot 的版本修改为 2 开头的 如2.7.4 &#xff0c;然后 刷新 Maven 项目即可。 在 …...

编程日记 2024/11/29 23:31:29

使用 Jina Embeddings v2 在 Elasticsearch 中进行后期分块

作者&#xff1a;来自 Elastic Gustavo Llermaly 在 Elasticsearch 中使用 Jina Embeddings v2 模型并探索长上下文嵌入模型的优缺点。 在本文中&#xff0c;我们将配置和使用 jina-embeddings-v2&#xff0c;这是第一个开源 8K 上下文长度嵌入模型&#xff0c;首先使用 semant…...

编程日记 2024/11/29 23:28:27

QT简易项目 数据库可视化界面 数据库编程SQLITE QT5.12.3环境 C++实现

案例需求&#xff1a; 完成数据库插入&#xff0c;删除&#xff0c;修改&#xff0c;查看操作。 分为 插入&#xff0c;删除&#xff0c;修改&#xff0c;查看&#xff0c;查询 几个模块。 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget…...

编程日记 2024/11/29 23:25:24

python json.dump()和json.dumps()的区别

用人话总结一下 json.dump()是针对文件的json和python的转换 json.dumps()主要是针对内容数据 json.dumps(obj, skipkeysFalse, ensure_asciiTrue, check_circularTrue, allow_nanTrue, clsNone, indentNone, separatorsNone, encoding“utf-8”, defaultNone, sort_keysFalse…...

编程日记 2024/11/29 23:19:20

网络流学习笔记

注&#xff1a;笔者是蒟蒻&#xff0c;所以本文几乎是干货&#xff0c;枯燥无味甚至可能会引人不适&#xff0c;请读者谨慎阅读。 为了笔者快爆掉的肝点个赞好吗&#xff1f;&#xff1f;&#xff1f; Part.1 网络流基础定义 一个有向带权图 G ( V , E ) G(V,E) G(V,E) 是…...

编程日记 2024/11/29 23:18:19

Mybatis PLUS查询对List使用OR模糊查询

Mybatis PLUS查询对List使用OR模糊查询 1、版本2、代码3、效果 1、版本 Mybatis PLUS版本&#xff1a;3.5.7 注意&#xff1a;版本3.1.2及以下是需要return的 因当前为高版本&#xff0c;代码中已将 return 注释。 2、代码 QueryWrapper<Object> queryWrapper new Que…...

编程日记 2024/11/29 23:16:17

Debezium日常分享系列之：Debezium Engine

Debezium日常分享系列之&#xff1a;Debezium Engine 依赖打包项目在代码中输出消息格式消息转换消息转换谓词高级记录使用引擎属性异步引擎属性数据库模式历史属性处理故障 Debezium连接器通常通过部署到Kafka Connect服务来运行&#xff0c;并配置一个或多个连接器来监视上游…...

编程日记 2024/11/29 23:12:13

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/1/15 6:47:17

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/15 5:22:39

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/20 3:50:17

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2026/1/20 2:59:25