[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]

by


first off, your button on click myFunction does nothing but create a function and attach an event listener. you want
to move those out of the function.

Then you want to target the input element, and not just use the event.target since the event target will be different if someone clicks the button.

<html>
<head>
    <script src="https://unpkg.com/@ffmpeg/[email protected]/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>

2

solved How to re-write the code for the following workflow , first upload a video and then process it? [closed]