Javascript 如何重新编写以下工作流程的代码，首先上载视频，然后进行处理？_Javascript

Javascript 如何重新编写以下工作流程的代码，首先上载视频，然后进行处理？

javascript

Javascript 如何重新编写以下工作流程的代码，首先上载视频，然后进行处理？,javascript,Javascript,这是功能的链接，谢谢 First, I'm trying to change the behavior for uploading a video and then press the button "corta" and It will cut, Any Idea, please? . The current behavior is that it will cut when you change the data of the input file

这是功能的链接，谢谢

   First, I'm trying to change the behavior for uploading a video and then press the button "corta" and It will cut, Any Idea, please?
    .
    The current behavior is that it will cut when you change the data of the input file ( When you upload a video ) and It's not waiting for clicking button "corta".


html，
身体{
保证金：0；
宽度：100%；
身高：100%
}
身体{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
科尔塔



函数myFunction（）{
const{createFFmpeg，fetchFile}=FFmpeg；
const ffmpeg=createFFmpeg（{log:true}）；
常量修剪=异步（{target:{files}}）=>{
const message=document.getElementById（'message'）；
const{name}=文件[0]；
message.innerHTML='Loading ffmpeg core.js'；
等待ffmpeg.load（）；
message.innerHTML='开始修剪'；
FS（'writeFile'，name，wait fetchFile（文件[0]）；
等待ffmpeg.run（'-i'，name'-ss'，0'，'-to'，1'，output.mp4'）；
message.innerHTML='完成修剪'；
const data=ffmpeg.FS（'readFile'，'output.mp4'）；
const-video=document.getElementById（'output-video'）；
video.src=URL.createObjectURL（新Blob（[data.buffer]，{type:'video/mp4'}））；
}
const elm=document.getElementById（'uploader'）；
elm.addEventListener（“变更”，修剪）；
}

首先，单击“我的函数”上的按钮除了创建一个函数并附加一个事件侦听器外，什么也不做。你想要将其移出函数

然后，您希望以输入元素为目标，而不仅仅是使用event.target，因为如果有人单击按钮，事件目标将不同

<html>

<head>
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <button onclick="myFunction()">corta</button>
    <video id="output-video" controls></video><br />
    <input type="file" id="uploader">
    <p id="message"></p>
    <script>
        function myFunction() {

            const { createFFmpeg, fetchFile } = FFmpeg;
            const ffmpeg = createFFmpeg({ log: true });

            const trim = async ({ target: { files } }) => {
                const message = document.getElementById('message');
                const { name } = files[0];
                message.innerHTML = 'Loading ffmpeg-core.js';
                await ffmpeg.load();
                message.innerHTML = 'Start trimming';
                ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
                await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
                message.innerHTML = 'Complete trimming';
                const data = ffmpeg.FS('readFile', 'output.mp4');

                const video = document.getElementById('output-video');
                video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
            }
            const elm = document.getElementById('uploader');
            elm.addEventListener('change', trim);
        }

    </script>
</body>

</html>


html，
身体{
保证金：0；
宽度：100%；
身高：100%
}
身体{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
科尔塔



（功能（）{
const{createFFmpeg，fetchFile}=FFmpeg；
const ffmpeg=createFFmpeg（{log:true}）；
const input=document.getElementById（'uploader'）；
const corta=document.getElementById（'corta'）；
const trim=async（）=>{
如果（input.files.length>0）{
const message=document.getElementById（'message'）；
const{name}=input.files[0]；
message.innerHTML='Loading ffmpeg core.js'；
等待ffmpeg.load（）；
message.innerHTML='开始修剪'；
FS（'writeFile'，name，wait fetchFile（input.files[0]）；
等待ffmpeg.run（'-i'，name'-ss'，0'，'-to'，1'，output.mp4'）；
message.innerHTML='完成修剪'；
const data=ffmpeg.FS（'readFile'，'output.mp4'）；
const-video=document.getElementById（'output-video'）；
video.src=URL.createObjectURL（新Blob（[data.buffer]，{type:'video/mp4'}））；
}
}
corta.addEventListener（'click'，trim）；
})(); // 自调用，不创建全局变量。

您按下的按钮运行的功能不起任何作用。它添加了一个事件侦听器。您想调用trimYes，但当您更改输入type=“file”时，将调用trim方法，这意味着只有当该输入更改其数据时，它才会处理该方法，我不寻找该数据，我需要上传视频并单击“corta”按钮，它将剪切，我正在考虑如何更改。添加了一个为您排序的答案。我犯了这个错误，文件未在HTMLButtonElement.trim中定义，请您帮助我。我想它在这里：const{name}=input.files[0]。如果你有能力的话，你能给我解释一下，这个元素会发生什么？const input=document.getElementById（'uploader'）；为什么会出现错误？当您写入input.files[0]时，如果在没有上载文件的情况下尝试使用该按钮，则会出现该问题。在进行更多操作之前，您需要检查是否存在这种情况。我会更新我的答案。更新。而且有效。

<html>
<head>
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <button id="corta">corta</button>
    <video id="output-video" controls></video><br />
    <input type="file" id="uploader">
    <p id="message"></p>
    <script>
        (function() {
            const { createFFmpeg, fetchFile } = FFmpeg;
            const ffmpeg = createFFmpeg({ log: true });
            const input = document.getElementById('uploader');
            const corta = document.getElementById('corta');
            const trim = async () => {
                if (input.files.length > 0) {
                  const message = document.getElementById('message');
                  const { name } = input.files[0];
                  message.innerHTML = 'Loading ffmpeg-core.js';
                  await ffmpeg.load();
                  message.innerHTML = 'Start trimming';
                  ffmpeg.FS('writeFile', name, await fetchFile(input.files[0]));
                  await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
                  message.innerHTML = 'Complete trimming';
                  const data = ffmpeg.FS('readFile', 'output.mp4');

                  const video = document.getElementById('output-video');
                  video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
                }
            }
    
            corta.addEventListener('click', trim);
        })(); // Self invoking as to not create global variables.
    </script>
</body>

</html>