{"id":20940541,"url":"https://github.com/showrin/video-player","last_synced_at":"2026-05-07T18:32:07.015Z","repository":{"id":122269021,"uuid":"289990860","full_name":"Showrin/video-player","owner":"Showrin","description":"A HTML video player with basic functionalities.","archived":false,"fork":false,"pushed_at":"2020-08-26T05:53:35.000Z","size":32609,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-30T08:35:53.013Z","etag":null,"topics":["css","design-patterns","jest","testing","typescript","video"],"latest_commit_sha":null,"homepage":"https://angry-shirley-396fd7.netlify.app/","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/Showrin.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-24T17:13:03.000Z","updated_at":"2023-03-09T02:02:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"6f6d9298-8b74-4b06-9ea6-ff150fdd8cf9","html_url":"https://github.com/Showrin/video-player","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Showrin/video-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Showrin%2Fvideo-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Showrin%2Fvideo-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Showrin%2Fvideo-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Showrin%2Fvideo-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Showrin","download_url":"https://codeload.github.com/Showrin/video-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Showrin%2Fvideo-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32750490,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","design-patterns","jest","testing","typescript","video"],"created_at":"2024-11-18T23:10:54.416Z","updated_at":"2026-05-07T18:32:06.985Z","avatar_url":"https://github.com/Showrin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# video-player\n\nA HTML video player with basic functionalities.\n\n\u003cbr/\u003e\n\n## Demo\n\nGo to the link: [https://angry-shirley-396fd7.netlify.app/](https://angry-shirley-396fd7.netlify.app/)\n\n\u003cbr/\u003e\n\n## Project Setup\n\nClone the repo first. To do so, go to the directory where you want to keep this repo. Then open the terminal from here and run the following command.\n\n```\n$ git clone git@github.com:Showrin/video-player.git\n```\n\n\u003cbr/\u003e\n\nThen navigate to the repository using this command.\n\n```\n$ cd video-player\n```\n\n\u003cbr/\u003e\n\nAfter cloning, if you are using **`yarn`**, install the required modules by running the following command.\n\n```\n$ yarn\n```\n\n\u003cbr/\u003e\n\nOr use the following command if you are using **`npm`**.\n\n```\n$ npm install\n```\n\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\nAfter that, if you are using **`yarn`**, transpile typescript files by running the following command.\n\n```\n$ yarn tsc\n```\n\n\u003cbr/\u003e\n\nOr use the following command if you are using **`npm`**.\n\n```\n$ npm run tsc\n```\n\n\u003cbr/\u003e\n\nNow open the **`index.html`** file with any browser and you will get the following UI. Here you can play or pause the video. And you can also rewind and play forward the video.\n\n![html-video-player-by-Showrin](https://i.imgur.com/4KTScvF.png)\n\n\u003cbr/\u003e\n\n## Dev Dependencies\n\nThis program has following development dependencies.\n\n| Module Name                              | Version | Why it's used                                       |\n| ---------------------------------------- | ------- | --------------------------------------------------- |\n| @babel/plugin-transform-modules-commonjs | ^7.10.4 | It's being used for using ES6 import-export in node |\n| jest                                     | ^26.4.1 | It's being used for writing and running tests       |\n| typescript                               | 3.1     | It's being used for compiling typescript file       |\n\n\u003cbr/\u003e\n\n## Pseudocode\n\n```\n// -----------Create Video-----------\nput the video element in a variable named video\ncreate player instance from Player class\ncreate videoPlayer instance from palyer.getVideoPlayer(video)\n\n\n// -----------For play()-----------\nfire video.play()\nset isPlaying = true\n\n\n// -----------For pause()-----------\nfire video.pause()\nset isPlaying = false\n\n\n// -----------For forward(time: number)-----------\nincrease video.currentTime by time\n\n\n// -----------For rewind(time: number)-----------\ndecrease video.currentTime by time\n\n```\n\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n## Used Design Pattern: Factory Design Pattern\n\n\u003e **Here Factory Design Pattern has been used for implementing play(), pause(), forward(), rewind() functionalities**\n\n\u003cbr/\u003e\n\nFirst, the interface for `Player` is implemented.\n\n```\ninterface PlayerInterface {\n  isPlaying: boolean;\n  played(): number;\n  play(): void;\n  pause(): void;\n  forward(time: number): void;\n  rewind(time: number): void;\n}\n```\n\n\u003cbr /\u003e\n\nThen, `VideoPlayer` class is implemented using the `PlayerInterface` interface.\n\n```\nclass VideoPlayer implements PlayerInterface {\n  private source: HTMLMediaElement;\n  isPlaying: boolean = false;\n\n  constructor(source: HTMLMediaElement) {\n    this.source = source;\n  }\n\n  played(): number {\n    return (this.source.currentTime / this.source.duration) * 100;\n  }\n\n  play(): void {\n    this.source.play();\n    this.isPlaying = true;\n  }\n\n  pause(): void {\n    this.source.pause();\n    this.isPlaying = false;\n  }\n\n  forward(time: number): void {\n    this.source.currentTime += time;\n  }\n\n  rewind(time: number): void {\n    this.source.currentTime -= time;\n  }\n}\n```\n\n\u003cbr /\u003e\n\nThen, the `Player` **(factory)** class is implemented **that defines which player should be created**.\n\n```\nclass Player {\n  getVideoPlayer(source: HTMLMediaElement): VideoPlayer {\n    return new VideoPlayer(source);\n  }\n}\n```\n\n\u003cbr /\u003e\n\nAnd now, it's time to create `VideoPlayer` from this Factory Design Pattern.\n\n```\nconst videoPlayerSource = \u003cHTMLMediaElement\u003e(\n  document.getElementById(\"js-video-player\")\n);\n\nconst player = new Player();\nconst videoPlayer = player.getVideoPlayer(videoPlayerSource);\n```\n\n\u003cbr/\u003e\n\n## Run Tests\n\nYou can run tests using this command in the console.\n\n```\nyarn test\n```\n\n\u003cbr/\u003e\n\nOr use the following if you are using npm.\n\n```\nnpm test\n```\n\n\u003cbr/\u003e\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\nAnd your changes will be visible [https://angry-shirley-396fd7.netlify.app/](https://angry-shirley-396fd7.netlify.app/) here after getting merged into the master.\n\n\u003cbr/\u003e\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshowrin%2Fvideo-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshowrin%2Fvideo-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshowrin%2Fvideo-player/lists"}