{"id":28271870,"url":"https://github.com/kade-github/openfl-haxeflixel-video-code","last_synced_at":"2026-02-11T00:44:28.340Z","repository":{"id":104378421,"uuid":"367814357","full_name":"Kade-github/openfl-haxeflixel-video-code","owner":"Kade-github","description":"My research on how to play videos in openfl haxeflixel","archived":false,"fork":false,"pushed_at":"2021-05-16T06:49:58.000Z","size":75,"stargazers_count":7,"open_issues_count":0,"forks_count":14,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-11T09:31:13.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kade-github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-05-16T07:37:11.000Z","updated_at":"2023-06-03T23:18:11.000Z","dependencies_parsed_at":"2023-11-05T03:45:25.165Z","dependency_job_id":null,"html_url":"https://github.com/Kade-github/openfl-haxeflixel-video-code","commit_stats":null,"previous_names":["kade-github/openfl-haxeflixel-video-code","kadedev/openfl-haxeflixel-video-code"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kade-github/openfl-haxeflixel-video-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kade-github%2Fopenfl-haxeflixel-video-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kade-github%2Fopenfl-haxeflixel-video-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kade-github%2Fopenfl-haxeflixel-video-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kade-github%2Fopenfl-haxeflixel-video-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kade-github","download_url":"https://codeload.github.com/Kade-github/openfl-haxeflixel-video-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kade-github%2Fopenfl-haxeflixel-video-code/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269928315,"owners_count":24498407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-20T18:23:40.200Z","updated_at":"2026-02-11T00:44:28.281Z","avatar_url":"https://github.com/Kade-github.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# openfl-haxeflixel-video-code\nThis is my research on how to play videos in openfl haxeflixel (webm only supported)\n# How To Setup\n1. Download the Friday Night Funkin source code in https://github.com/ninjamuffin99/Funkin and follow `EVERYTHING` (including the git part which is very important) (make sure its the new file system otherwise you need to put extra code `which i have the solution for lol`)\n2. Install actuate by doing `haxelib install actuate`\n3. Install the extension-webm fork by doing `haxelib git extension-webm https://github.com/GrowtopiaFli/extension-webm`\n4. It won't work lol so type the command `lime rebuild extension-webm windows`\n(sry idk how to fix this for mac)\n5. Download the zip of this repository and copy paste the files inside the `source` folder to your fnf source code's `source` folder\n6. Edit the `Main.hx` file in the fnf source code \\\nThen add after the code\n```js\naddChild(new FlxGame(gameWidth, gameHeight, initialState, zoom, updateframerate, drawframerate, skipSplash, startFullscreen));\n```\nAnd before code\n```js\n#if !mobile\naddChild(new FPS(10, 3, 0xFFFFFF));\n#end\n```\nThe code\n```js\nvar ourSource:String = \"assets/videos/DO NOT DELETE OR GAME WILL CRASH/dontDelete.webm\";\n\n#if web\nvar str1:String = \"HTML CRAP\";\nvar vHandler = new VideoHandler();\nvHandler.init1();\nvHandler.video.name = str1;\naddChild(vHandler.video);\nvHandler.init2();\nGlobalVideo.setVid(vHandler);\nvHandler.source(ourSource);\n#elseif desktop\nvar str1:String = \"WEBM SHIT\"; \nvar webmHandle = new WebmHandler();\nwebmHandle.source(ourSource);\nwebmHandle.makePlayer();\nwebmHandle.webm.name = str1;\naddChild(webmHandle.webm);\nGlobalVideo.setWebm(webmHandle);\n#end\n```\nSo it would look something like\n```js\naddChild(new FlxGame(gameWidth, gameHeight, initialState, zoom, updateframerate, drawframerate, skipSplash, startFullscreen));\n\t\t\nvar ourSource:String = \"assets/videos/DO NOT DELETE OR GAME WILL CRASH/dontDelete.webm\";\n\t\t\n#if web\nvar str1:String = \"HTML CRAP\";\nvar vHandler = new VideoHandler();\nvHandler.init1();\nvHandler.video.name = str1;\naddChild(vHandler.video);\nvHandler.init2();\nGlobalVideo.setVid(vHandler);\nvHandler.source(ourSource);\n#elseif desktop\nvar str1:String = \"WEBM SHIT\"; \nvar webmHandle = new WebmHandler();\nwebmHandle.source(ourSource);\nwebmHandle.makePlayer();\nwebmHandle.webm.name = str1;\naddChild(webmHandle.webm);\nGlobalVideo.setWebm(webmHandle);\n#end\n\n#if !mobile\naddChild(new FPS(10, 3, 0xFFFFFF));\n#end\n```\n# Setting up `Project.xml`\n1. Edit `Project.xml` in the fnf source code\n2. Find the section with `\u003chaxelib name=\"etc\" /\u003e`\n3. Add these two extra lines\n```xml\n\u003chaxelib name=\"actuate\" /\u003e\n\u003chaxelib name=\"extension-webm\" if=\"desktop\" /\u003e\n```\n4. `FOLLOW THIS 4TH STEP ONLY IF YOUR USING THE OLD FILE SYSTEM`\nIn the section with `\u003cassets path=\"bla\"\u003e` \\\nAdd these two lines\n```xml\n\u003cassets path=\"assets/videos\" include=\"*.mp3\" if=\"web\"/\u003e\n\u003cassets path=\"assets/videos\" include=\"*.ogg\" unless=\"web\"/\u003e\n```\n5. If your in the new file system \\\nCreate a new folder named `videos` inside assets/preload \\\nIf your in the old file system \\\nCreate a new folder named `videos` inside assets\n6. Paste the `DO NOT DELETE OR GAME WILL CRASH` folder inside the videos folder (either assets/preload/videos or assets/videos `SOURCE CODE SPECIFIC`) if you don't you know what happens, game crashes.\n# Setting up the desktop build\nFor all you windows users out there\nYou need to do an extra step\nYou must know how to use cmd or `Command Prompt`\n(sorry but this is only for `64 bit` architectures)\n1. Download ffmpeg\nhttps://github.com/BtbN/FFmpeg-Builds/releases/download/autobuild-2021-05-14-20-06/ffmpeg-n4.4-15-ge87e006121-win64-gpl-shared-4.4.zip\n2. Extract the zip file to your choice\n3. Go inside the `bin` folder inside the extracted zip file\n4. Open `Command Prompt`\n5. Change directory inside the `bin` folder\n6. `More on this later`\n# Understanding of how video works\nAs you know, this only supports `webm` video files not `mp4` or `any other file type` \\\nThe reasoning of this is because of the different types of codecs not embedded inside openfl \\\nLet me give an explanation \\\n`Video Files` require a `codec` \\\na codec is an `encoder` or a `decoder` for video files \\\nYou `CANNOT` compress video files to a smaller size in modern times because they are already `COMPRESSED` and that is why we have `codecs` so you can't push the limit \\\nOpenFL has no codec embedded into it that's why someone who made `openfl-webm` coded the webm codec from scratch using `c++` for haxe/openfl \\\nBut if you will ask `Why does it work for html?` \\\nIt's because when it comes to html the `BROWSER` has the codec \\\nIf you were to do it Natively `Native means an application that uses the system's commands instead of depending on other software like browsers which is for html5`, there are no codecs built into it. \\\nNow if you were to ask `Why is it named extension-webm if it was openfl-webm then?` It's because `openfl-webm` is ancient and broken so someone made `extension-webm` to fix it: https://github.com/HaxeExtension/extension-webm \\\nNow if you were to ask `Then why did i install https://github.com/GrowtopiaFli/extension-webm instead of https://github.com/HaxeExtension/extension-webm then?` It's because i added some extra code in `WebmPlayer.hx` to fix memory leaks. \\\nNow if you were to ask `What are memory leaks?` well a memory leak is a thing wherein the memory is stuffed and not freed, in basic terms, your `RAM` processes more data. \\\nWhy you ask? it's because the video isn't being replaced but keep being added each time. \\\nHow did i fix this issue you asked? i added extra code to `WebmPlayer.hx` which allows you to change the `SOURCE VIDEO` of the webm player anytime.\n# Solution for the desktop build\nNow how will we setup the video on desktop? \\\nWell in webm player there is `NO` audio support because it's broken lol so now we are in trouble but do not worry because ffmpeg is here to save us. \\\nMy solution is to `Audio Sync` a way of Synchronizing the audio version of the video to the video `You must have an ogg file either just the video's audio or just empty audio that lasts as long as the video's time (i made a solution so if you don't have audio on your video then just don't make an ogg file)`. \\\nSo back to that ffmpeg change directory folder is a ffprobe command template i have\n```cmd\nffprobe -v error -count_frames -select_streams v:0 -show_entries stream=nb_read_frames -of default=nokey=1:noprint_wrappers=1 \"yourvideo.mp4\"\n```\nOk so my recommendation is to Convert your video to webm then convert that webm to an mp4 because sometimes there are frame losses to webm files which fails the `Audio Sync`. \\\nThis command logs the number of frames your video has and now you may ask. \\\n`If i have to convert webm to an mp4 because of frame loss for ffprobe why the hell can't i just input the webm file?` Well it's because ffprobe cannot detect the frame numbers in your webm files so you have to use a different format. \\\nNow you may ask `What am i suppose to do with the frame numbers?` You have to make your video name first. \\\nLet me give a video name sample of `video`. \\\nNow inside the videos folder in either `assets/preload/videos` or `assets/videos` `(SOURCE CODE SPECIFIC)` if the video name is `video` then make a file called `video.txt` and put the frame numbers there as easy as that. \\\n2. put your webm file in so it will be `video.webm` \\\n3. put the ogg converted file in so it will be `video.ogg` \\\n`IMPORTANT NOTE THAT THERE ARE DIFFERENT CODECS FOR WEBM FILES THE SPECIFIC ONE IS VP8 WHILE VP9 AND OTHERS AREN'T SUPPORTED`\n# Usage of the player\nYou can edit `VideoState.hx` all you want but the usage of the `VideoState` class is pretty simple. \\\nThe return must be a new class but i made a separate `VideoState.hx` file inside the `function` folder in this repository to change the callback to a function.\n```js\nFlxG.switchState(new VideoState('yoursourcevideo.webm', callback either new YourClass() or function() { Code here }));\n```\n# End of the document\nThank you for taking your time to read the entire repository ReadMe file. \\\nThis is the end of the document i hope you understood everything i wrote for you to play videos in `Friday Night Funkin`. \\\nSupport the kickstarter here: https://www.kickstarter.com/projects/funkin/friday-night-funkin-the-full-ass-game\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkade-github%2Fopenfl-haxeflixel-video-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkade-github%2Fopenfl-haxeflixel-video-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkade-github%2Fopenfl-haxeflixel-video-code/lists"}