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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【随笔】AI大模型对软件开发的影响

随着 AI 技术的不断发展&#xff0c;AI大模型正在重塑软件开发流程&#xff0c;从代码自动生成到智能测试&#xff0c;未来&#xff0c;AI 大模型将会对软件开发者、企业&#xff0c;以及整个产业链都产生深远的影响。欢迎探讨 AI 是如何重塑软件开发的各个环节以及带来的新的流…

Java的常识

程序员分类 初级程序员(大学毕业一年以内)大概月薪:2-5K 初中级程序员(工作经验2-3年)大概月薪:6-10K 中级程序员(工作经验4-5年)大概月薪:10-15K 高级程序员(工作经验5++)大概月薪:15K++ 普通公司对于程序员的月薪资天花板25K 工作实景 微信小程序、手机APP、写…

常用的数据结构

队列(FIFO) 栈(LIFO) 链表 hash表 hash冲突处理 开放式寻址 线性探测 表示依次检查索引为 hash(key) + 1、hash(key) + 2 ... 的位置。i 是冲突后的探查步数。公式:hash(i) = (hash(key) + i) % TableSize二次探查 规则:冲突后探查的步长是平方递增的,例如,检查位置为 hash…

SpringSecurity6

1.快速入门 2.SpringSecurity底层原理 使用的是委托过滤器,委托过滤器实际上就是 sevlet 过滤器 将自己放入Sevlet环境下 然后里面是一个 过滤器链代理 代理类下又是一个代理过滤器链的集合, 对于不同请求可以有不同的过滤器链, springsecurity有个默认的过滤器链 Defau…

记 centos9 安装 docker

第一步&#xff1a;安装该dnf-plugins-core软件包&#xff08;它提供了管理 DNF 存储库的命令&#xff09; sudo dnf -y install dnf-plugins-core 第二步&#xff1a;设置存储库(这里使用的是阿里云的镜像源) sudo dnf config-manager --add-repo https://mirrors.aliyun.co…

电磁兼容(EMC):磁性材料(永磁、软磁、功能磁)详解

目录 一、磁性材料概述 二、常用磁性材料分类 1. 永磁材料 2. 软磁材料 3. 功能性磁材 三、软磁材料特点 一、磁性材料概述 磁性材料是指由过渡元素铁&#xff08;Fe&#xff09;、钴&#xff08;Co&#xff09;、镍&#xff08;Ni&#xff09;及其合金等组成的能够直接…

海盗王用golang重写的AccountServer功能

自从用golang重写了海盗王的网关gateserver以来&#xff0c;一直想把accountserver也重写了&#xff0c;但是一直没有进行。 趁上次刚写好那个golang版的更新器&#xff0c;还有些熟悉&#xff0c;于是把原来AccountServer的C代码重写读了个大概。它原版的写得太过于复杂&#…

10个Word自动化办公脚本

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

详细分析 npm run build 基本知识 | 不同环境不同命令

目录 前言1. 基本知识2. 构建逻辑 前言 关于部署服务器的知识推荐阅读&#xff1a;npm run build部署到云服务器中的Nginx&#xff08;图文配置&#xff09; 1. 基本知识 npm run 是 npm 的一个命令&#xff0c;用于运行 package.json 中定义的脚本&#xff0c;可以通过 “s…

多组输入a+b ||:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 计算ab 输入描述: 第一行输入一个数据组数n接下来n行每行输入两个整数 输出描述: 对于每组数据计算ab的值 示例1 输入 2 1 1 2 2 输出 2 4 代码&#xff1a; import java.util.Scan…

【AI日记】24.11.29 kaggle 比赛 Titanic-2 | 鼓励自己

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 核心工作 内容&#xff1a;学习 kaggle 入门比赛 Titanic - Machine Learning from Disaster&#xff0c;学习机器学习课程备注&#xff1a;入门比赛有很多 notebook 适合我这种新手学习&#xff0c;尤其是那…

Leetcode 每日一题 104.二叉树的最大深度

目录 问题描述 示例 示例 1&#xff1a; 示例 2&#xff1a; 约束条件 题解 方法一&#xff1a;广度优先搜索&#xff08;BFS&#xff09; 步骤 代码实现 方法二&#xff1a;递归 步骤 代码实现 结论 问题描述 给定一个二叉树 root&#xff0c;我们需要返回其最大…

数据结构--树二叉树顺序结构存储的二叉树(堆)

前言 前面我们学习了顺序表、链表、栈和队列&#xff0c;这些都是线性的数据结构。今天我们要来学习一种非线性的数据结构——树。 树的概念及结构 树的概念 树是一种非线性的数据结构&#xff0c;是由n&#xff08;n≥0&#xff09;个有效结点组成的一个具有层次关系的集合…

代码随想录第31天

56. 合并区间 class Solution:def merge(self, intervals: List[List[int]]) -> List[List[int]]:intervals.sort(keylambda p: p[0]) # 按照左端点从小到大排序ans []for p in intervals:if ans and p[0] < ans[-1][1]: # 可以合并ans[-1][1] max(ans[-1][1], p[1…

MicroSoft Project2007 安装教程

一、安装教程 访问地址 二、安装链接 通过网盘分享的文件&#xff1a;Project2007CD 链接: https://pan.baidu.com/s/1Y8VnhVPiKjcmAEh8cIR5sQ?pwdp2hk 提取码: p2hk --来自百度网盘超级会员v6的分享

揭示Lyapunov方法的奥秘:控制理论中的稳定性之钥

揭示Lyapunov方法的奥秘&#xff1a;控制理论中的稳定性之钥 引言 在控制理论和动力系统的研究中&#xff0c;稳定性分析始终是一个核心问题。19世纪末&#xff0c;俄罗斯杰出的数学家亚历山大米哈伊洛维奇李雅普诺夫&#xff08;Aleksandr Mikhailovich Lyapunov&#xff09…

【娱乐项目】基于cnchar库与JavaScript的汉字查询工具

Demo介绍 利用了 cnchar 库来进行汉字相关的信息查询&#xff0c;并展示了汉字的拼音、笔画数、笔画顺序、笔画动画等信息用户输入一个汉字后&#xff0c;点击查询按钮&#xff0c;页面会展示该汉字的拼音、笔画数、笔画顺序&#xff0c;并绘制相应的笔画动画和测试图案 cnchar…

C#.Net筑基 - 常见类型

01、结构体类型Struct 结构体 struct 是一种用户自定义的值类型&#xff0c;常用于定义一些简单&#xff08;轻量&#xff09;的数据结构。对于一些局部使用的数据结构&#xff0c;优先使用结构体&#xff0c;效率要高很多。 可以有构造函数&#xff0c;也可以没有。因此初始化…

怎么选拔人才

1.引入案例&#xff1a;航天员的选拔 一、选拔&#xff1a; 1.测评和甄选的概念2.测评甄选的程序3.测评甄选原则&#xff1a;因事择人、人岗匹配&#xff1b;科学考核&#xff0c;平等竞争&#xff1b;德才兼备4.测评甄选的信效度&#xff1a;稳定系数、等值系数、内在一致系…

nginx-1.22.1 limit_req功能在C底层实现

##nginx.conf配置文件limit_req配置 ##nginx限制访问频率&#xff0c;限流 http { limit_req_zone $binary_remote_addr zoneone:30m rate1r/s; server { listen 8103; server_name localhost; location ~ ^/yym/ { …