{"id":14385073,"url":"https://github.com/bbc/html5-video-compositor","last_synced_at":"2025-04-10T00:18:45.623Z","repository":{"id":34147000,"uuid":"37983977","full_name":"bbc/html5-video-compositor","owner":"bbc","description":"This is the BBC Research \u0026 Development UX Team's experimental shader based video composition engine for the browser. For new projects please consider using or new VideoContext library https://github.com/bbc/videocontext .","archived":false,"fork":false,"pushed_at":"2016-10-24T15:44:48.000Z","size":4143,"stargazers_count":208,"open_issues_count":2,"forks_count":59,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-10T00:18:29.321Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bbc.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}},"created_at":"2015-06-24T12:49:42.000Z","updated_at":"2024-10-05T03:55:32.000Z","dependencies_parsed_at":"2022-08-28T20:52:15.179Z","dependency_job_id":null,"html_url":"https://github.com/bbc/html5-video-compositor","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fhtml5-video-compositor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fhtml5-video-compositor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fhtml5-video-compositor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fhtml5-video-compositor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbc","download_url":"https://codeload.github.com/bbc/html5-video-compositor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248131340,"owners_count":21052821,"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","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":"2024-08-28T18:01:55.732Z","updated_at":"2025-04-10T00:18:45.597Z","avatar_url":"https://github.com/bbc.png","language":"JavaScript","readme":"# HTML5-Video-Compositor\n\n**Note: For new projects please consider using the [VideoContext](https://github.com/bbc/videocontext), a new and improved library from BBC R\u0026D which overcomes some of the limitations of the html5-video-compositor.**\n\nA shader based video composition engine for the browser.\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\u003c/head\u003e\n\u003cbody\u003e\n    \u003cscript type=\"text/javascript\" src=\"videocompositor.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        window.onload = function () {\n            var canvas = document.getElementById('player-canvas');\n            var videoCompositor = new VideoCompositor(canvas);\n\n            videoCompositor.playlist = {\n                \"tracks\":[\n                    [{type:\"video\", sourceStart:0, start:0, duration:5, src:\"video1.mp4\", id:\"1\"},                      {type:\"video\", sourceStart:0, start:7.5, duration:5, src:\"video2.mp4\", id:\"3\"}],\n                    [                                      {type:\"image\", start:2.5, duration:5, src:\"image.png\", id:\"2\"}]\n                ]\n            };\n\n            videoCompositor.play();\n        };\n    \u003c/script\u003e\n    \u003ccanvas id=\"player-canvas\"\u003e\u003c/canvas\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n\n## Introduction\nThis is an experimental video composition engine which can play edit decision lists in the browser. Content can be dynamically appended to the EDL as it's playing to create interactive and responsive content.\n\nIn video editing terms an EDL defines the points at which to cut and assemble video sources. VideoCompositor uses a simple JSON based EDL to describe how to cut and assemble HTML5 video sources, images, and WebGL contexts, it also provides a framework for performing shader based compositing operations (i.e cross-fades, green-screen).\n\n\n## Limitations\n\n* Effects are limited to one shader per track ... stay tuned for updates on this.\n* (Probably) won't work on mobile.\n* Cant' change the properties of MediaSourceReferences dynamically.\n* Videos must be encoded correctly.\n\n## Video Encoding\nYou will probably only see acceptable video performance if you encode videos with some kind of \"fast decode\" option. Using the avconv tool this can be done with the following command.\n\n```Bash\navconv -i input.mp4 -tune fastdecode -strict experimental output.mp4\n```\n\n\n## Documentation\n\nThe [tutorial.md file](https://github.com/bbc/html5-video-compositor/blob/master/tutorial/tutorial.md) in the tutorial directory of the project gives a walk-through of using the library to sequence clips and perform simple effects.\n\n[API documentation](https://github.com/bbc/html5-video-compositor/tree/master/doc) is available in the /doc directory of the project.\n\nNotes about usage, behaviors, and other miscellaneous information is available on the [Wiki](https://github.com/bbc/html5-video-compositor/wiki).\n\n\n## Build\n\nThis project uses npm to manage dependencies. To build the compositor, in the root of the project run:\n\n```Bash\nnpm install\n```\n\nOnce this has completed you can build the source files by running (this will build a commonjs2 and a vanilla js file):\n\n```Bash\nnpm run build\n```\n\nTo auto-recompile the project on source change run (this will only rebuild the vanilla js file):\n```Bash\nnpm run dev\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fhtml5-video-compositor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbc%2Fhtml5-video-compositor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fhtml5-video-compositor/lists"}