{"id":13407666,"url":"https://github.com/nkoehler/mat-video","last_synced_at":"2025-10-04T05:32:00.915Z","repository":{"id":43974680,"uuid":"130772740","full_name":"nkoehler/mat-video","owner":"nkoehler","description":":tv: mat-video is an Angular 8/9+ video player using Material!","archived":true,"fork":false,"pushed_at":"2020-07-30T18:17:28.000Z","size":53309,"stargazers_count":91,"open_issues_count":19,"forks_count":45,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-01-13T10:38:47.652Z","etag":null,"topics":["angular","angular8","angular9","css3","html","html5","mat-video","material","typescript","video","video-player"],"latest_commit_sha":null,"homepage":"https://nkoehler.github.io/mat-video/","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/nkoehler.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-24T00:22:41.000Z","updated_at":"2023-12-04T03:58:43.000Z","dependencies_parsed_at":"2022-09-11T02:11:11.862Z","dependency_job_id":null,"html_url":"https://github.com/nkoehler/mat-video","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/nkoehler%2Fmat-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkoehler%2Fmat-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkoehler%2Fmat-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkoehler%2Fmat-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nkoehler","download_url":"https://codeload.github.com/nkoehler/mat-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235222543,"owners_count":18955327,"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","angular8","angular9","css3","html","html5","mat-video","material","typescript","video","video-player"],"created_at":"2024-07-30T20:00:46.488Z","updated_at":"2025-10-04T05:31:54.184Z","avatar_url":"https://github.com/nkoehler.png","language":"TypeScript","funding_links":[],"categories":["Repos 仓库"],"sub_categories":["H5 Player"],"readme":"**July 2020 - This project is no longer maintained**\n\n# mat-video is an Angular 8/9+ video player using Material\n[![npm version](https://badge.fury.io/js/mat-video.svg)](https://badge.fury.io/js/mat-video)\n[![Build Status](https://travis-ci.org/nkoehler/mat-video.svg?branch=master)](https://travis-ci.org/nkoehler/mat-video)\n[![Maintainability](https://api.codeclimate.com/v1/badges/46fb1a751d60d0f8b316/maintainability)](https://codeclimate.com/github/nkoehler/mat-video/maintainability)\n\n**mat-video** is an Angular component for playing videos.  It has all the features you would expect from a standard video player, all in an extremely light package. The video player is designed to be flexible and easy to use; you can be up and running in less than 5 minutes!\n\nIt was built for modern browsers using _TypeScript_, _CSS3_ and _HTML5_ with _Angular \u0026 Material 8/9+_.\n\nSee the [changelog](https://github.com/nkoehler/mat-video/blob/master/CHANGELOG.md) for recent changes.  \n\nIf you wish to contribute, please fill out the [pull request template](https://github.com/nkoehler/mat-video/blob/master/CONTRIBUTING.md).  For issues, please fill out the [issue template](https://github.com/nkoehler/mat-video/blob/master/ISSUE_TEMPLATE.md) before submitting.\n\n## Features\n- Native _HTML5_ video player\n- Easy to use\n- Play/Pause\n- Seeking\n- Volume\n- Autoplay\n- Preload\n- Looping\n- Scaling\n- Fullscreen\n- Download\n- Buffering spinners\n- Poster image\n- Subtitles and text tracks\n- Multiple media sources\n- Customizable controls\n- Material theming\n- Keyboard shortcuts\n- Fixed and responsive sizing\n- Supports Chrome, Firefox, Safari, and Edge\n\n## Installation\n**mat-video** requires [Angular Material](https://material.angular.io/guide/getting-started) as a peer dependency, including animations and a theme.\n\n```\nng add @angular/material\n```\n\nTo use **mat-video** in your project install it via [npm](https://www.npmjs.com/package/mat-video):\n\n```\nnpm install --save mat-video\n```\n\nAdd the following to your module:\n\n```typescript\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatVideoModule } from 'mat-video';\n\n@NgModule({\n  imports: [\n    BrowserAnimationsModule,\n    MatVideoModule\n  ],\n})\nexport class AppModule { }\n```\n\n## Usage\nA minimal example is quite simple, in your HTML file:\n\n```html\n    \u003cmat-video src=\"localOrRemoteVideo.mp4\"\u003e\u003c/mat-video\u003e\n```\n\nA slightly more customized example, in your HTML file:\n\n```html\n    \u003cmat-video title=\"My Tutorial Title\" [autoplay]=\"true\" [preload]=\"true\" [fullscreen]=\"true\" [download]=\"false\" color=\"accent\" spinner=\"spin\" poster=\"image.jpg\"\u003e\n      \u003csource matVideoSource src=\"tutorial.mp4\" type=\"video/mp4\"\u003e\n      \u003csource src=\"tutorial.webm\" type=\"video/webm\"\u003e\n      \u003ctrack matVideoTrack src=\"subtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\"\u003e\n      \u003ctrack src=\"subtitles_no.vtt\" kind=\"subtitles\" srclang=\"no\" label=\"Norwegian\"\u003e\n    \u003c/mat-video\u003e\n```\n\n## API\nAttribute | Type | Description | Default\n--- | --- | --- | ---\n*src* | **string, MediaStream, MediaSource, Blob** | Path, URL, or `srcObject` for a video | *null*\n*title* | **string** | Title for the video | *null*\n*autoplay* | **boolean** | Whether the video should autoplay | *false*\n*preload* | **boolean** | Whether the video should preload | *true*\n*loop* | **boolean** | Whether the video should loop | *false*\n*time* | **number** (two-way bindable) | Get or set the timestamp of the video | *0*\n*muted* | **boolean** (two-way bindable) | Get or set whether the video is muted | *false*\n*quality* | **boolean** | Whether the video will have a quality indicator | *true*\n*download* | **boolean** | Whether the video will have a download option | *false*\n*fullscreen* | **boolean** | Whether the video will have a fullscreen option | *true*\n*playsinline* | **boolean** | Whether the video should play inline | *false*\n*showFrameByFrame* | **boolean** | Whether the video will display frame-by-frame controls | *false*\n*keyboard* | **boolean** | Whether the player will have keyboard shortcuts | *true*\n*overlay* | **boolean** | Force the overlay/controls to be shown or hidden | *null*\n*color* | **ThemePalette** | Material theme color palette for the sliders | *primary*\n*spinner* | **string** | Use 'spin', 'dot', 'split-ring', 'hourglass', or pass your own buffering spinner class | *spin*\n*poster* | **string** | Path or URL to a poster image | *null*\n\nIn addition, [source](https://www.w3schools.com/tags/tag_source.asp) and [track](https://www.w3schools.com/tags/tag_track.asp) elements are supported by **mat-video**.\n\nThe **_matVideoSource_** attribute can be used on the *source* tag to automatically reload the video when the source changes.\n\nThe **_matVideoTrack_** attribute can be used on the *track* tag to automatically reload the video when the track changes.\n\n## Events\nListening to video events can be accomplished by directly accessing the video tag within **mat-video**.\n\nIn your HTML file:\n\n```html\n    \u003cmat-video #video src=\"localOrRemoteVideo.mp4\"\u003e\u003c/mat-video\u003e\n```\n\nIn your TS file:\n\n```typescript\nexport class SampleComponent implements OnInit {\n  @ViewChild('video') matVideo: MatVideoComponent;\n  video: HTMLVideoElement;\n\n  constructor(private renderer: Renderer2) { }\n\n  ngOnInit(): void {\n    this.video = this.matVideo.getVideoTag();\n\n    // Use Angular renderer or addEventListener to listen for standard HTML5 video events\n    \n    this.renderer.listen(this.video, 'ended', () =\u003e console.log('video ended'));\n    this.video.addEventListener('ended', () =\u003e console.log('video ended'));\n  }\n}\n```\n\nThis API feature is considered experimental, and is subject to change.\n\n## Compatibility\n**mat-video** supports the last two major Angular versions.  Previous versions of **mat-video** support older versions of Angular.\n\nmat-video Version | Angular Version\n--- | ---\n1.0.0 - 2.7.2 | Angular 5, 6, 7, 8\n2.8.0+ | Angular 8, 9\n\n\n## Credits\n**mat-video** is an open-source project developed by Nicholas Koehler.\n\nSpecial thanks:\n- [mediapack-me](https://github.com/mediapack-me) for responsive assistance.\n- [buu700](https://github.com/buu700) for several features and fixes.\n- [fabiomartino](https://github.com/fabiomartino) for modernizing project structure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkoehler%2Fmat-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnkoehler%2Fmat-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkoehler%2Fmat-video/lists"}