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

ffmpeg.js视频播放(转换)

news 2026/2/10 18:20:29

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/2/9 0:12:12

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46