{"id":14994725,"url":"https://github.com/byteark/byteark-player-angular","last_synced_at":"2026-01-20T03:04:28.992Z","repository":{"id":256165206,"uuid":"853152772","full_name":"byteark/byteark-player-angular","owner":"byteark","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-11T04:16:12.000Z","size":999,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-25T15:42:40.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/byteark.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-06T05:05:35.000Z","updated_at":"2025-07-24T14:37:41.000Z","dependencies_parsed_at":"2024-09-09T10:59:17.132Z","dependency_job_id":"8e06ae11-c6a0-4a8e-8ef9-339d95a00c5f","html_url":"https://github.com/byteark/byteark-player-angular","commit_stats":null,"previous_names":["byteark/byteark-player-angular"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/byteark/byteark-player-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteark%2Fbyteark-player-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteark%2Fbyteark-player-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteark%2Fbyteark-player-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteark%2Fbyteark-player-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/byteark","download_url":"https://codeload.github.com/byteark/byteark-player-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteark%2Fbyteark-player-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28594958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: 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":[],"created_at":"2024-09-24T16:08:21.685Z","updated_at":"2026-01-20T03:04:28.976Z","avatar_url":"https://github.com/byteark.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Media"],"readme":"# ByteArk Player Container for Angular\n\n[![NPM](https://img.shields.io/npm/v/@byteark/byteark-player-angular.svg)](https://www.npmjs.com/package/@byteark/byteark-player-angular)\n\n- [ByteArk Player Container for Angular](#byteark-player-container-for-angular)\n  - [Demo](#demo)\n  - [Features](#features)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Basic Props](#basic-props)\n    - [Source Object](#source-object)\n  - [Callback Props](#callback-props)\n  - [Advanced Props](#advanced-props)\n  - [Advanced Usages](#advanced-usages)\n    - [Controlling Players](#controlling-players)\n    - [Using VideoJS Plugins](#using-videojs-plugins)\n    - [Request Media/Encryption with credentials](#request-mediaencryption-with-credentials)\n    - [Customize Placeholder](#customize-placeholder)\n  - [License](#license)\n\n## Demo\n\nYou can try on [the demo page](https://byteark-player-angular-demo.vercel.app/).\n\n## Features\n\n- Remote player updates. No need to update your code for minor improvements.\n- Using placeholder to maintain page's layout before the player ready.\n- Controls basic behaviours via props.\n- Custom advance behaviours via callbacks to access ByteArk Player/VideoJS instance directly.\n- Supported TypeScript\n\n## Installation\n\nThis library is distributed via NPM. You may install from NPM or Yarn.\n\n```bash\n# For NPM\nnpm install --save @byteark/byteark-player-angular\n# For Yarn\nyarn add @byteark/byteark-player-angular\n# For pnpm\npnpm add @byteark/byteark-player-angular\n```\n\n## Usage\n\nTo use the ByteArk Player Container in your Angular application, follow these steps:\n\n1. **Import the ByteArkPlayerContainer component:**\n\n   ```typescript\n   import { Component } from \"@angular/core\";\n   import { ByteArkPlayerContainer, type ByteArkPlayerContainerProps } from \"@byteark/byteark-player-angular\";\n\n   @Component({\n     selector: \"app-sample-blog\",\n     standalone: true,\n     imports: [ByteArkPlayerContainer],\n     template: ` \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e `,\n   })\n   export class SampleBlogComponent {\n     title = \"ByteArk Player Container | Sample Blog\";\n   }\n   ```\n\n2. **Add the component to your template:**\n\n   ```html\n   \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e\n   ```\n\n3. **Configure the player options:**\n\n   ```typescript\n   export class SampleBlogComponent {\n     title = \"ByteArk Player Container | Sample Blog\";\n     options: ByteArkPlayerContainerProps = {\n       fluid: true,\n       autoplay: false,\n       aspectRatio: \"16:9\",\n       poster: \"https://example.com/poster.jpg\",\n       sources: [\n         {\n           src: \"https://example.com/video.mp4\",\n           type: \"video/mp4\",\n           title: \"Sample Video\",\n         },\n       ],\n     };\n   }\n   ```\n\n## Basic Props\n\nFollowing properties are the properties that can be updated to the player,\nwithout re-creating the player instance. Additional properties will be passed to player.\n\n| Name          | Type           | Default | Description                                                                   |\n| ------------- | -------------- | ------- | ----------------------------------------------------------------------------- |\n| autoplay      | Boolean/String | true    | Autoplay the video after player is created. (true/false/'muted'/'play'/'any') |\n| aspectRatio   | String         | -       | Use with fluid layout mode, to inform expected video's aspect ratio (16:9)    |\n| controls      | Boolean        | true    | Show/hide the controls bar.                                                   |\n| fill          | Boolean        | -       | Use fill layout mode.                                                         |\n| fluid         | Boolean        | -       | Use fluid layout mode.                                                        |\n| loop          | Boolean        | -       | Restart the video playback after plays to the end.                            |\n| muted         | Boolean        | -       | Play the video without sounds.                                                |\n| playerSlugId  | String         | -       | SlugId of player created via api player server service                        |\n| playerVersion | String         | 1.0     | Version of the player to use.                                                 |\n| playbackRate  | Number         | 1.0     | Playback speed. 1.0 means original speed.                                     |\n| playsinline   | Boolean        | true    | Should be true so custom controls available on all platforms, including iOS.  |\n| poster        | String         | -       | Image to be show before the video is playing.                                 |\n| preload       | String         | -       | Preload the video before play. ('none'/'metadata'/'auto')                     |\n| responsive    | Boolean        | -       | Auto show/hide controls depending on the screen size.                         |\n| seekButtons   | Boolean        | false   | Show 10 seconds seek buttons and allow double-tap to seek on mobile.          |\n| sources       | Array          | -       | Array of video source object to be played.                                    |\n| volume        | Number         | -       | Video's volume, between 0 to 1.                                               |\n\nYou can also use other props not listed here,\nbut appear as [VideoJS's options](https://docs.videojs.com/tutorial-options.html#playbackrates).\nHowever, changing props will not effective after the player is created.\n\n### Source Object\n\nThe `source` object has 2 required fields, and more optional field:\n\n| Name    | Type   | Description                            |\n| ------- | ------ | -------------------------------------- |\n| src     | String | URL to the video.                      |\n| type    | String | Video content type.                    |\n| title   | String | Video title to display on the player.  |\n| videoId | String | Video's ID, usually used on Analytics. |\n| poster  | String | Poster image URL for the video.        |\n\nTo provide multiple version of sources, you can use array of source objects.\n\n## Callback Props\n\nWe also provide some callback properties, so you can inject some behaviours\ndirectly to the ByteArk Player, and also, to the VideoJS's instance.\n\n| Name                 | Type     | Callback Parameters                                                        | Description                                                                 |\n| -------------------- | -------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------- |\n| onPlayerLoaded       | Function | -                                                                          | Callback function to be called when loaded player's resources.              |\n| onPlayerLoadingError | Function | `({error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError)` | Callback function to be called when there're an error about loading player. |\n| onPlayerSetup        | Function | -                                                                          | Callback function to be called when player is setup.                        |\n| onPlayerSetupError   | Function | `({error: ByteArkPlayerContainerError, originalError: ByteArkPlayerError)` | Callback function to be called when there're an error when setup player.    |\n| onReady              | Function | `(player: ByteArkPlayer)`                                                  | Callback function to be called when a player instance is ready.             |\n| onPlayerCreated      | Function | `(player: ByteArkPlayer)`                                                  | Callback function to be called when a player instance is created.           |\n\n## Advanced Props\n\nWe also provide some ways to custom the appearance of the video placeholder,\nand some advance behaviours.\n\n| Name                 | Type        | Description                                                                                                                                                                    |\n| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| placeholderTemplate  | TemplateRef | Custom video placeholder. This should be an Angular TemplateRef.                                                                                                               |\n| createPlayerFunction | Function    | Custom video instance. This function should return a VideoJS's player instance.                                                                                                |\n| lazyload             | Boolean     | The player loads its asset files once it got rendered on the webpage. By passing this prop, the player then loads its asset files once the user clicked on the player instead. |\n| playerEndpoint       | String      | Endpoint to the video player (without version part).                                                                                                                           |\n| playerJsFileName     | String      | File name of player's JS.                                                                                                                                                      |\n| playerCssFileName    | String      | File name of player's CSS.                                                                                                                                                     |\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ByteArkPlayerContainer, type ByteArkPlayerContainerProps } from \"@byteark/byteark-player-angular\";\n\n@Component({\n  selector: \"app-sample-blog\",\n  standalone: true,\n  imports: [ByteArkPlayerContainer],\n  template: ` \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e `,\n})\nexport class SampleBlogComponent {\n  title = \"ByteArk Player Container | Sample Blog\";\n  options: ByteArkPlayerContainerProps = {\n    playerEndpoint: \"https://my-custom-endpoint.byteark.com\",\n    lazyload: true,\n    fluid: true,\n    autoplay: false,\n    aspectRatio: \"16:9\",\n    poster: \"https://example.com/poster.jpg\",\n    sources: [\n      {\n        src: \"https://example.com/video.mp4\",\n        type: \"video/mp4\",\n        title: \"Sample Video\",\n      },\n    ],\n  };\n}\n```\n\n## Advanced Usages\n\n### Controlling Players\n\nYou may access the player instance from `onReady` callback parameter.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ByteArkPlayerContainer, type ByteArkPlayerContainerProps, type ByteArkPlayer } from \"@byteark/byteark-player-angular\";\n\n@Component({\n  selector: \"app-sample-blog\",\n  standalone: true,\n  imports: [ByteArkPlayerContainer],\n  template: ` \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e `,\n})\nexport class SampleBlogComponent {\n  title = \"ByteArk Player Container | Sample Blog\";\n  player: ByteArkPlayer | null = null;\n  options: ByteArkPlayerContainerProps = {\n    playerEndpoint: \"https://my-custom-endpoint.byteark.com\",\n    lazyload: true,\n    fluid: true,\n    autoplay: false,\n    aspectRatio: \"16:9\",\n    poster: \"https://example.com/poster.jpg\",\n    sources: [\n      {\n        src: \"https://example.com/video.mp4\",\n        type: \"video/mp4\",\n        title: \"Sample Video\",\n      },\n    ],\n  };\n  onReady(player: ByteArkPlayer) {\n    this.player = player;\n  }\n}\n```\n\n### Using VideoJS Plugins\n\nYou can use VideoJS plugins with ByteArk Player Container.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ByteArkPlayerContainer, type ByteArkPlayerContainerProps } from \"@byteark/byteark-player-angular\";\n\n@Component({\n  selector: \"app-sample-blog\",\n  standalone: true,\n  imports: [ByteArkPlayerContainer],\n  template: ` \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e `,\n})\nexport class SampleBlogComponent {\n  title = \"ByteArk Player Container | Sample Blog\";\n  options: ByteArkPlayerContainerProps = {\n    playerEndpoint: \"https://my-custom-endpoint.byteark.com\",\n    lazyload: true,\n    fluid: true,\n    autoplay: false,\n    aspectRatio: \"16:9\",\n    poster: \"https://example.com/poster.jpg\",\n    sources: [\n      {\n        src: \"https://example.com/video.mp4\",\n        type: \"video/mp4\",\n        title: \"Sample Video\",\n      },\n    ],\n  };\n  onReady(player: ByteArkPlayer) {\n    // The player is ready! Initialize plugins here.\n  }\n}\n```\n\n### Request Media/Encryption with credentials\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ByteArkPlayerContainer, type ByteArkPlayerContainerProps } from \"@byteark/byteark-player-angular\";\n\n@Component({\n  selector: \"app-sample-blog\",\n  standalone: true,\n  imports: [ByteArkPlayerContainer],\n  template: ` \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e `,\n})\nexport class SampleBlogComponent {\n  title = \"ByteArk Player Container | Sample Blog\";\n  options: ByteArkPlayerContainerProps = {\n    playerEndpoint: \"https://my-custom-endpoint.byteark.com\",\n    lazyload: true,\n    fluid: true,\n    autoplay: false,\n    aspectRatio: \"16:9\",\n    poster: \"https://example.com/poster.jpg\",\n    sources: [\n      {\n        src: \"https://example.com/video.mp4\",\n        type: \"video/mp4\",\n        title: \"Sample Video\",\n      },\n    ],\n    html5: {\n      hlsjs: {\n        xhrSetup: function (xhr: XMLHttpRequest, url: string) {\n          xhr.withCredentials = true;\n        },\n      },\n    },\n  };\n  onReady(player: ByteArkPlayer) {\n    // The player is ready! Initialize plugins here.\n  }\n}\n```\n\n### Customize Placeholder\n\nYou can customize the player's placeholder before the player is ready.\n\n```typescript\nimport { Component, ViewChild, TemplateRef } from \"@angular/core\";\nimport { ByteArkPlayerContainer, type ByteArkPlayerContainerProps } from \"@byteark/byteark-player-angular\";\nimport { CustomPlaceholderComponent } from \"./custom-placeholder.component\";\n\n@Component({\n  selector: \"app-sample-blog\",\n  standalone: true,\n  imports: [ByteArkPlayerContainer, CustomPlaceholderComponent],\n  template: ` \u003cdiv class=\"aspect-video\" style=\"position: relative; width: 100%; height: 0; padding-bottom: 56.25%\"\u003e\n    \u003cbyteark-player-container [options]=\"options\"\u003e\u003c/byteark-player-container\u003e\n    \u003cng-template #placeholderTemplateRef\u003e\n      \u003ccustom-placeholder [playerProps]=\"options\" (clickPlaceholder)=\"onClickPlaceholder()\" /\u003e\n    \u003c/ng-template\u003e\n  \u003c/div\u003e`,\n})\nexport class SampleBlogComponent {\n  title = \"ByteArk Player Container | Sample Blog\";\n  @ViewChild(\"placeholderTemplateRef\", { static: true }) placeholderTemplateRef!: TemplateRef\u003cunknown\u003e;\n\n  options: ByteArkPlayerContainerProps = {\n    playerEndpoint: \"https://my-custom-endpoint.byteark.com\",\n    lazyload: true,\n    fluid: true,\n    autoplay: false,\n    aspectRatio: \"16:9\",\n    poster: \"https://example.com/poster.jpg\",\n    sources: [\n      {\n        src: \"https://example.com/video.mp4\",\n        type: \"video/mp4\",\n        title: \"Sample Video\",\n      },\n    ],\n    placeholderTemplate: this.placeholderTemplate,\n  };\n\n  async onClickPlaceholder() {\n    await this.player?.play();\n  }\n\n  ngOnInit() {\n    this.options.placeholderTemplate = this.placeholderTemplate;\n  }\n}\n```\n\n## License\n\nMIT © [ByteArk Co. Ltd.](https://github.com/byteark)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteark%2Fbyteark-player-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyteark%2Fbyteark-player-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteark%2Fbyteark-player-angular/lists"}