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

ffmpeg.js视频播放(转换)

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 以上几个现…...

后端 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…...

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

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

探索 Vue 3.0中Treeshaking特性?

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

Paddle Inference部署推理(十)

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

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

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

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

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

什么是堆?

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

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

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

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

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

RK3568部署yolo8记录

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

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

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

JavaScript原生深拷贝方法 structuredClone使用

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

SpringBoot无法使用jkd8问题

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

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

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

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…...

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…...

网络流学习笔记

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

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…...

Debezium日常分享系列之:Debezium Engine

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

I.MX6U 裸机开发20. DDR3 内存知识

I.MX6U 裸机开发20. DDR3 内存知识 一、DDR3内存简介1. DDR发展历程SRAMSDRAMDDR1DDR2DDR3DDR4DDR5 2. 开发板资源3. DDR3的时间参数1. 传输速率2. tRCD3. CL 参数作用取值范围工作原理4. tRC参数原理单位与取值5. tRAS重要性及作用 二、I.MX6U MMDC 控制器1. MMDC简介&#xf…...

【R安装】VSCODE安装及R语言环境配置

目录 VSCODE下载及安装VSCODE上配置R语言环境参考 Visual Studio Code&#xff08;简称“VSCode” &#xff09;是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的&#xff0c;针对于编写现代Web和云应用的跨平台源代码编辑器&…...

ES更新问题 Failed to close the XContentBuilder异常

问题描述 使用RestHighLevelClient对文档进行局部更新的时候报错如下&#xff1a; Suppressed: java.lang.IllegalStateException: Failed to close the XContentBuilderat org.elasticsearch.common.xcontent.XContentBuilder.close(XContentBuilder.java:1011)at org.elast…...

svn-git下载

windows&#xff1a; svn 客户端&#xff1a;-------------- TortoiseSVN 安装 下载地址&#xff1a;https://tortoisesvn.net/downloads.html, 页面里有语言包补丁的下载链接。 目前最新版为 1.11.0 下载地址&#xff1a; https://osdn.net/projects/tortoisesvn/storage/1.…...

10个Word自动化办公脚本

在日常工作和学习中&#xff0c;我们常常需要处理Word文档&#xff08;.docx&#xff09;。 Python提供了强大的库&#xff0c;如python-docx&#xff0c;使我们能够轻松地进行文档创建、编辑和格式化等操作。本文将分享10个使用Python编写的Word自动化脚本&#xff0c;帮助新…...

Paddle Inference部署推理(十八)

十八&#xff1a;Paddle Inference推理 &#xff08;C&#xff09;API详解 3. 使用 CPU 进行预测 注意&#xff1a; 在 CPU 型号允许的情况下&#xff0c;进行预测库下载或编译试尽量使用带 AVX 和 MKL 的版本 可以尝试使用 Intel 的 MKLDNN 进行 CPU 预测加速&#xff0c;默…...

Redis开发02:redis.windows-service.conf 默认配置文件解析与注解

文件位置&#xff1a;redis安装目录下的 redis.windows-service.conf &#xff0c;存放了redis服务的相关配置&#xff0c;下面列举出默认配置的含义&#xff1a; 配置项含义bind 127.0.0.1限制 Redis 只监听本地回环地址&#xff0c;意味着只能从本地连接 Redis。protected-m…...

redis大key和热key

redis中大key、热key 什么是大key大key可能产生的原因大key可能会造成什么影响如何检测大key如何优化删除大key时可能的问题删除大key的策略 热key热key可能导致的问题解决热key的方法 什么是大key 大key通常是指占用内存空间过大或包含大量元素的键值对。 数据量大&#xff…...

Dubbo 最基础的 RPC 应用(使用 ZooKeeper)

看国内的一些项目时 Dubbo 这个词经常闪现&#xff0c;一直也不以为然&#xff0c;未作搜索&#xff0c;当然也不知道它是做什么用的。直到最近阅读关于大型网站架构相关的书中反复提到 Dubbo 后&#xff0c;觉得不能再对它视而不见。Google 了一下&#xff0c;它是在阿里巴巴创…...

科技赋能:企业如何通过新技术提升竞争力的策略与实践

引言 在当今瞬息万变的商业环境中&#xff0c;科技的迅猛发展正在重新定义行业的游戏规则。无论是小型企业还是跨国巨头&#xff0c;都感受到数字化转型的迫切需求。过去&#xff0c;企业竞争力更多依赖于成本控制、资源调配或市场覆盖&#xff0c;而如今&#xff0c;新技术的引…...

wordpress模板如何用/谷歌play

时隔一年&#xff0c;嵩哥带来他的新作《雨幕》。他依旧认真创作&#xff0c;追求高品质&#xff0c;作品在发表之前已听了五百遍以上。如此高品质的音乐&#xff0c;大家如何评价呢&#xff1f;通过哔哩哔哩上的视频弹幕&#xff0c;感受一下。01 实现思路首先&#xff0c;利用…...

西安俄语网站建设/简述网站建设的基本流程

MySQL 的 JDBC 驱动 JAR 的版本问题版本问题mysql jdbc驱动版本与mysql数据库版本有一定的对应关系&#xff0c;用错了版本就会出现连接不上数据库的异常。mysql jdbc驱动版本与mysql数据库版本的对应关系&#xff0c;照着以下关系&#xff0c;选择相应的jdbc驱动和mysql数据版…...

怎么做网站流量统计分析/镇江百度推广公司

以上内容发布于中国国际人才交流基金会/PMI&#xff08;项目管理协会&#xff09; 个人总结的中文报名7个重点注意点&#xff1a; 1.PMI账号编号账号密码&#xff08;PMI英文官网账号一定要学员自己测试是否能登录&#xff0c;因为中文审核机构是一定会登录检查的&#xff09;&…...

金坛市住房和城乡建设局网站/什么是外链

原文&#xff1a; http://www.blogjava.net/flysky19/archive/2016/03/19/92976.html 注&#xff1a;如果使用JDK5.0的话&#xff0c;JVM会自动完成装包解包的。 String int Integer间的转换 如何将字串 String 转换成整数 int? int i Integer.valueOf(my_str).intValue()…...

网上做代卖的网站/全网营销平台有哪些

synchronized 和 ReentrantLock 的实现原理1&#xff09;synchronized 和 ReentrantLock的区别2&#xff09;知识扩展2.1&#xff09;ReentrantLock 源码分析2.2&#xff09;公平锁 VS 非公平锁3&#xff09;JDK 1.6 锁优化3.1&#xff09;自适应自旋锁3.2&#xff09;锁升级4&…...

上海哪个公司做网站好/百度推广怎么提高关键词排名

package cn.itcast.iotest;/* * 文件夹的复制 * 数据源 c:\\demo * 数据目的 d: * * 操作文件夹 File类 功能 * 文件的复制 IO流读写文件&#xff0c;字节 * * 实现思想 * 1. 数据目的&#xff0c;创建一个和数据源同名文件夹 * 获取到数据源文件夹名字 * File方法mkdirs() *…...