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

ffmpeg.js视频播放(转换)

news 2025/9/6 10:43:09

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

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/4 19:45:58

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/9/6 0:55:26

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/8/22 4:42:14

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/9/4 7:03:26

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/4 16:01:50

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/6 5:46:56

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/9/2 17:48:50

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/7/12 13:46:11

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/9/2 18:03:42