{"id":21441,"date":"2022-11-13T15:21:08","date_gmt":"2022-11-13T09:51:08","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/"},"modified":"2022-11-13T15:21:08","modified_gmt":"2022-11-13T09:51:08","slug":"solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/","title":{"rendered":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-67411381\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"67411381\" data-parentid=\"67411326\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>first off, your button on click <code>myFunction<\/code> does nothing but create a function and attach an event listener. you want<br \/>\nto move those out of the function.<\/p>\n<p>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.<\/p>\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n    &lt;script src=\"https:\/\/unpkg.com\/@ffmpeg\/ffmpeg@0.9.5\/dist\/ffmpeg.min.js\"&gt;&lt;\/script&gt;\n    &lt;style&gt;\n        html,\n        body {\n            margin: 0;\n            width: 100%;\n            height: 100%\n        }\n\n        body {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;button id=\"corta\"&gt;corta&lt;\/button&gt;\n    &lt;video id=\"output-video\" controls&gt;&lt;\/video&gt;&lt;br \/&gt;\n    &lt;input type=\"file\" id=\"uploader\"&gt;\n    &lt;p id=\"message\"&gt;&lt;\/p&gt;\n    &lt;script&gt;\n        (function() {\n            const { createFFmpeg, fetchFile } = FFmpeg;\n            const ffmpeg = createFFmpeg({ log: true });\n            const input = document.getElementById('uploader');\n            const corta = document.getElementById('corta');\n            const trim = async () =&gt; {\n                if (input.files.length &gt; 0) {\n                  const message = document.getElementById('message');\n                  const { name } = input.files[0];\n                  message.innerHTML = 'Loading ffmpeg-core.js';\n                  await ffmpeg.load();\n                  message.innerHTML = 'Start trimming';\n                  ffmpeg.FS('writeFile', name, await fetchFile(input.files[0]));\n                  await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');\n                  message.innerHTML = 'Complete trimming';\n                  const data = ffmpeg.FS('readFile', 'output.mp4');\n\n                  const video = document.getElementById('output-video');\n                  video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video\/mp4' }));\n                }\n            }\n    \n            corta.addEventListener('click', trim);\n        })(); \/\/ Self invoking as to not create global variables.\n    &lt;\/script&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved How to re-write the code for the following workflow , first upload a video and then process it? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] 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. &lt;html&gt; &#8230; <a title=\"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\" aria-label=\"More on [Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333],"class_list":["post-21441","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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. &lt;html&gt; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-13T09:51:08+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]\",\"datePublished\":\"2022-11-13T09:51:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\"},\"wordCount\":93,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\",\"name\":\"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-13T09:51:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb","og_description":"[ad_1] 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. &lt;html&gt; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-13T09:51:08+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]","datePublished":"2022-11-13T09:51:08+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/"},"wordCount":93,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/","name":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-13T09:51:08+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-re-write-the-code-for-the-following-workflow-first-upload-a-video-and-then-process-it-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to re-write the code for the following workflow , first upload a video and then process it? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/21441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=21441"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/21441\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=21441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=21441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=21441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}