{"id":13588557,"url":"https://github.com/epiclabs-io/epic-video-comparator","last_synced_at":"2025-04-08T06:32:14.421Z","repository":{"id":57111793,"uuid":"169060879","full_name":"epiclabs-io/epic-video-comparator","owner":"epiclabs-io","description":"Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source.","archived":false,"fork":false,"pushed_at":"2019-11-03T19:49:00.000Z","size":792,"stargazers_count":84,"open_issues_count":3,"forks_count":8,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-17T22:41:29.381Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://epiclabs-io.github.io/epic-video-comparator-demo/","language":"TypeScript","has_issues":true,"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/epiclabs-io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-02-04T10:21:12.000Z","updated_at":"2025-01-23T01:51:26.000Z","dependencies_parsed_at":"2022-08-21T00:01:06.718Z","dependency_job_id":null,"html_url":"https://github.com/epiclabs-io/epic-video-comparator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiclabs-io%2Fepic-video-comparator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiclabs-io%2Fepic-video-comparator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiclabs-io%2Fepic-video-comparator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epiclabs-io%2Fepic-video-comparator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epiclabs-io","download_url":"https://codeload.github.com/epiclabs-io/epic-video-comparator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792100,"owners_count":20996877,"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-01T15:06:47.349Z","updated_at":"2025-04-08T06:32:12.456Z","avatar_url":"https://github.com/epiclabs-io.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","HarmonyOS","Players \u0026 Clients","Players"],"sub_categories":["Windows Manager","Mobile \u0026 Web Players"],"readme":"# Epic Video Comparator · [![npm version](https://img.shields.io/npm/v/@epiclabs/epic-video-comparator.svg?style=flat)](https://www.npmjs.com/package/@epiclabs/epic-video-comparator) [![Travis CI Status](https://api.travis-ci.org/epiclabs-io/epic-video-comparator.svg?branch=master)](https://travis-ci.org/epiclabs-io/epic-video-comparator)\n\n[LIVE DEMO](https://epiclabs-io.github.io/epic-video-comparator-demo/)\n\nJavaScript library which implements a video comparator component: two overlapped and synchronized video players each one playing an independent source. It is based on [epic-video-player](https://www.npmjs.com/package/@epiclabs/epic-video-player) library, which currently supports native HTML video (WebM, Ogg Theora Vorbis, Ogg Opus, Ogg FLAC and MP4 H.264), MPEG-DASH([dash.js](https://github.com/Dash-Industry-Forum/dash.js)) and HLS ([hls.js](https://github.com/video-dev/hls.js)) streams.\n\n![video-comparator-overview](https://user-images.githubusercontent.com/467658/53631764-8f6f6c00-3c13-11e9-9f0f-638f6d0a39d8.png)\n\nFor ABR sources, it is also possible to select the desired rendition to be played:\n\n![video-comparator-quality-selector](https://user-images.githubusercontent.com/467658/53633279-52a57400-3c17-11e9-8942-dacb3b78d53e.png)\n\n# Installation\n\nInstall epic-video-comparator into your project\n\n```\n$ npm install @epiclabs/epic-video-comparator --save\n```\n\n# Using it as CommonJS module\n```\nimport { Comparator } from '@epiclabs/epic-video-comparator';\n...\nconst comparatorConfig = {\n    leftUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',\n    rightUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',\n    mediaControls: true,\n    loop: true,\n};\nconst myComp = new Comparator(comparatorConfig, document.getElementById('comparator-container'));\n\n```\n\n# Using it as UMD module within ```\u003cscript\u003e``` tag\n```\n\u003chead\u003e\n    ...\n    \u003cscript src=\"bundle/index.min.js\"\u003e\u003c/script\u003e\n    ...\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n    \u003cdiv id=\"comparator-container\"\u003e\u003c/div\u003e\n    ...\n    \u003cscript type=\"text/javascript\"\u003e\n        document.addEventListener('DOMContentLoaded', function () {\n            var comparatorConfig = {\n                leftUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',\n                rightUrl: 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd',\n                mediaControls: true,\n                loop: true,\n            };\n            window.myComp = new evc.Comparator(comparatorConfig, document.getElementById('comparator-container'));\n        });\n    \u003c/script\u003e\n    ...\n\u003c/body\u003e\n```\n\n# Development\n```\n$ git clone https://github.com/epiclabs-io/epic-video-comparator.git\n$ cd epic-video-comparator\n$ npm install\n$ npm run build\n```\n\n# API\n\n## Methods\n\n- **new Comparator(config: IComparatorConfig, container: HTMLDivElement)**\n\n  Creates a new instance of epic-video-comparator.\n\n- **pause()**\n\n  Stops playback of both videos.\n\n- **play()**\n\n  Starts playback of both videos.\n\n- **togglePlayPause()**\n\n  Switches playing/pause status.\n\n- **seek(time: number)**\n\n  Sets both players' playback to the same time position.\n\n- **reload()**\n\n  Destroys and reload the epic-video-comparator.\n\n- **toggleFullScreen()**\n\n  Enters / exits fullscreen mode.\n\n- **setRenditionByKbps(player: 'left' | 'right', kbps: number): IRendition**\n\n  Sets a desired rendition given as Kbps on one of the players.\n\n- ~~setRenditionKbps(player: 'left' | 'right', kbps: number): IRendition~~\n\n  This method has been deprecated since version 0.0.2. Use *setRenditionByKbps* instead.\n\n- **setRenditionByIndex(player: 'left' | 'right', index: number): IRendition**\n\n  Sets a desired rendition given as index number on one of the players. The order will be the order of the array returned by *getRenditions* method.\n\n- ~~setRenditionIndex(player: 'left' | 'right', index: number): IRendition~~\n\n  This method has been deprecated since version 0.0.2. Use *setRenditionByIndex* instead.\n\n- **getRenditions(player: 'left' | 'right'): IRendition[]**\n\n  Retrieves the list of available renditions of one of the players.\n\n- **togggleStats(): void**\n\n  Shows / Hides the stats boxes.\n\n- **updateStats(innerLeft: string, innerRight: string): void**\n\n  Sets the given content to each one of the players' stats box. It will overwrite any stat given by this library as default. It is recommended to be used within a `setInterval`.\n\n- **destroy(): void**\n\n  Removes all DOM elements and binding listeners.\n\n## Events\n\nThe events are binded to the comparator container. Usage example:\n\n```\nvar container = document.getElementById('comparator-container');\ncontainer.addEventListener('created', () =\u003e console.log('created!'));\n```\n\n| Event | Description |\n| ----- | ----------- |\n| created | Fires when the comparator is created (it occurs during comparator creation or reload but also when a new rendition is selected on any side). |\n| fullscreen_toggle | Fires when the comparator toggles its fullscreen mode. |\n\n## Object interfaces\n\n| Name | Properties | Default value |\n| ---- | ---------- |:-------------:|\n| IComparatorConfig | autoplay?: boolean;\u003cbr\u003eleftUrl: string;\u003cbr\u003eloop?: boolean; \u003cbr\u003erightUrl: string;\u003cbr\u003emediaControls?: boolean;\u003cbr\u003estats?: IStatsConfig / boolean  | true \u003cbr\u003e - \u003cbr\u003e true \u003cbr\u003e - \u003cbr\u003e true \u003cbr\u003e IStatsConfig defaults |\n| IStatsConfig | showDuration?: boolean;\u003cbr\u003eshowBitrate?: boolean;\u003cbr\u003eshowResolution?: boolean;\u003cbr\u003eshowVideoCodec?: boolean;\u003cbr\u003eshowAudioCodec?: boolean;\u003cbr\u003eshowDroppedFrames?: boolean;\u003cbr\u003eshowBuffered?: boolean;\u003cbr\u003eshowStartupTime?: boolean;\u003cbr\u003ecustom?: boolean; | true \u003cbr\u003e true \u003cbr\u003e true \u003cbr\u003e  true \u003cbr\u003e  true \u003cbr\u003e  true \u003cbr\u003e  true \u003cbr\u003e  true \u003cbr\u003e  false |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepiclabs-io%2Fepic-video-comparator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepiclabs-io%2Fepic-video-comparator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepiclabs-io%2Fepic-video-comparator/lists"}