{"id":21471946,"url":"https://github.com/theideasaler/angular-thumb-video","last_synced_at":"2025-07-09T08:04:39.911Z","repository":{"id":101682622,"uuid":"388444425","full_name":"theideasaler/angular-thumb-video","owner":"theideasaler","description":"This repo is built with Angular to show a thumbnail preview image on video's progress bar hovered. The solution is implemented in front-end but also support backend thumbnail image loading.","archived":false,"fork":false,"pushed_at":"2022-06-25T13:25:04.000Z","size":366,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-03T21:04:50.285Z","etag":null,"topics":["angular","image","thumbnail","video"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-thumbnail-video","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theideasaler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-07-22T11:52:27.000Z","updated_at":"2025-05-04T20:43:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"03347abc-0bce-49b6-89c6-02c9b37d56e0","html_url":"https://github.com/theideasaler/angular-thumb-video","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":"0.33333333333333337","last_synced_commit":"7a1e879a1549ed679e3c084e01be4024fb846349"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theideasaler/angular-thumb-video","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theideasaler%2Fangular-thumb-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theideasaler%2Fangular-thumb-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theideasaler%2Fangular-thumb-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theideasaler%2Fangular-thumb-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theideasaler","download_url":"https://codeload.github.com/theideasaler/angular-thumb-video/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theideasaler%2Fangular-thumb-video/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264419452,"owners_count":23605197,"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":["angular","image","thumbnail","video"],"created_at":"2024-11-23T09:46:41.218Z","updated_at":"2025-07-09T08:04:39.889Z","avatar_url":"https://github.com/theideasaler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Video Thumbnail Player\n\nA simple solution implemented in Angular to display a thumbnail preiview image on video's progress bar hovered. The component can load thumbnail image from either frontend or backend.\n\u003cimg src=\"https://github.com/theideasaler/files/blob/main/ngx-thumbnail-video.gif\" /\u003e\n\n## Installation\n\nInstall the npm package.\n```\n  npm i ngx-thumbnail-video\n```\nImport module:\n```ts\n  import { NgxThumbnailVideoModule } from 'ngx-thumbnail-video';\n\n  @NgModule({\n      imports: [NgxThumbnailVideoModule]\n  })\n```\n\n## Usage 1 - Front End\nPass your video url and options into the component. e.g.\n\nin component.ts\n```ts\nimport { Component } from '@angular/core';\nimport { VideoPlayerConfig } from 'ngx-thumbnail-video';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent {\n  options: VideoPlayerConfig = {\n    width: '960px',\n    height: '540px'\n  };\n}\n```\n\nHTML:\n```html\n\u003cngx-thumbnail-video url=\"assets/video.mp4\" [options]=\"options\"\u003e\u003c/ngx-thumbnail-video\u003e\n```\n\n\n## Usage 2 - Back End\nYou can choose to load the thumbnail image from a backend to improve the performance of the component. In this case, you will need to add a few configurations.\n\nStep 1. Set the 'frontendPreload' to false in options.\n```ts\n  options: VideoPlayerConfig = {\n    width: '960px',\n    height: '540px',\n    frontendPreload: false\n  };\n```\n\nStep 2 Listen to the progressBarHover event from the component to know the currenlty hovered time(in seconds).\n```html\n\u003cngx-thumbnail-video url=\"assets/video.mp4\" [options]=\"options\" (progressBarHover)=\"eventListener($event)\" [thumb]=\"thumb\"\u003e\u003c/ngx-thumbnail-video\u003e\n```\n\nStep 3. Pass in a stringified object with sec and url properties, `sec` should be the same as the property emited from progressBarHover, and `url` can be loaded from backend server.\n```ts\nthumb = JSON.stringify({sec, url});\n```\n\n\n## Options\n\n| name | type | default | description |\n|------|------|---------|-------------|\n| width | string | '960px' | Video width. |\n| height | string | '540px' | Video height. |\n| autoplay | boolean| false | Autoplay video on load. |\n| frontendPreload | boolean| true | Generate thumbnail image at front end. |\n| mute | boolean | true | Mute video at beginning. |\n| borderRadius | string | '0' | Video border radius. |\n| interval | number | 1 | Interval to load a thumbnail image, must be an integer, unit is second. | \n| thumbnailRatio | number | 5 | Thumbnail image shrink ratio compared to video. |\n\n\n## Contribute to this package\nAre you interested in contributing to this package? Feel free to adding a new functionality and create a merge request. \n\n## Roadmap\n\n`fullScreen` - add full-screen control to the control bar just like YouTube Video did.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheideasaler%2Fangular-thumb-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheideasaler%2Fangular-thumb-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheideasaler%2Fangular-thumb-video/lists"}