ffmpeg.js视频播放(转换)

embedded/2024/11/29 3:28:53/

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.ppmy.cn/embedded/141340.html

相关文章

SpringMVC-03-HelloSpring

3. HelloSpring 3.1. 配置版 新建一个Moudle &#xff0c; springmvc-02-hello &#xff0c; 添加web的支持&#xff01;确定导入了SpringMVC 的依赖&#xff01;配置web.xml &#xff0c; 注册DispatcherServlet <?xml version"1.0" encoding"UTF-8&quo…

【组件封装】uniapp vue3 封装一个自定义下拉刷新组件pullRefresh,带刷新时间和加载动画教程

文章目录 前言一、实现原理二、组件样式和功能设计三、scroll-view 自定义下拉刷新使用回顾相关属性&#xff1a;最终版完整代码&#xff1a; 前言 手把手教你封装一个移动端 自定义下拉刷新组件带更新时间和加载动画&#xff08;PullRefresh&#xff09;&#xff0c;以uniapp …

能源电力企业安全数据内外网文件交换

在数字化浪潮的推动下&#xff0c;能源电力行业数据交换的频率急剧上升&#xff0c;涉及的视频、研发、设计等各类文件数量庞大。这些文件的内外网传输不仅要追求速度&#xff0c;更要确保数据安全。随着国家对数据安全重视程度的提高&#xff0c;《网络安全法》和《数据安全法…

【SpringBoot】28 API接口防刷(Redis + 拦截器)

Gitee仓库 https://gitee.com/Lin_DH/system 介绍 常用的 API 安全措施包括&#xff1a;防火墙、验证码、鉴权、IP限制、数据加密、限流、监控、网关等&#xff0c;以确保接口的安全性。 常见措施 1&#xff09;防火墙 防火墙是网络安全中最基本的安全设备之一&#xff0c…

arm rk3588 onnx转rknn

一、环境部署&#xff1a; https://github.com/airockchip/rknn_model_zoo/tree/main/examples/yolo11 从该网址下载yolo11的模型。支持80种类型检测 二、下载模型 进入examples/yolo11/model文件夹&#xff0c;执行 ./download_model.sh 如图&#xff1a; 三、模型转换…

Vue.js 中 v-for 指令与 JavaScript 数组方法

简介 在 Vue.js 中&#xff0c;v-for 指令是渲染列表数据的利器。它能够让你轻松地根据数组或对象渲染一个列表。本文将首先展示 v-for 的基本用法&#xff0c;然后详细介绍 JavaScript 数组的常用方法&#xff0c;并提供示例&#xff0c;展示如何在 Vue.js 应用中操作数组。 …

基于Springboot的流浪宠物管理系统

基于javaweb的流浪宠物管理系统 介绍 基于javaweb的流浪宠物管理系统的设计与实现&#xff0c;后端框架使用Springbootmybatis&#xff0c;前端框架使用Vuehrml&#xff0c;数据库使用mysql&#xff0c;使用B/S架构实现前台用户系统和后台管理员系统&#xff0c;和不同权限级别…

2022年全国职业院校技能大赛(中职组)网络安全竞赛试题解析

2022年全国职业院校技能大赛&#xff08;中职组&#xff09; 网络安全竞赛试题 &#xff08;1&#xff09; &#xff08;总分100分&#xff09; 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分A.基础设施设置与安全加固&#xff1b;B.网络安全事件响应、数字取证调查和应用安…