https://github.com/bennypowers/shaka-player
Custom element wrapper for google's Shaka Player
https://github.com/bennypowers/shaka-player
customelements google-shaka-player hacktoberfest html shaka-player video-player webcomponents
Last synced: about 1 year ago
JSON representation
Custom element wrapper for google's Shaka Player
- Host: GitHub
- URL: https://github.com/bennypowers/shaka-player
- Owner: bennypowers
- License: mit
- Created: 2018-03-25T06:31:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:44:24.000Z (almost 3 years ago)
- Last Synced: 2025-05-21T16:57:07.868Z (about 1 year ago)
- Topics: customelements, google-shaka-player, hacktoberfest, html, shaka-player, video-player, webcomponents
- Language: JavaScript
- Homepage:
- Size: 1.69 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# shaka-player
Custom element wrapper for google's Shaka Player
## Usage
```html
```
## Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|-----------------------------|--------------------------------|-----------|----------------------------------|------------|--------------------------------------------------|
| `allowCrossSiteCredentials` | `allow-cross-site-credentials` | | `boolean` | | Whether shaka player should use cookies for CORS requests. |
| `autoplay` | `autoplay` | | `boolean` | false | Whether the video should auto-play. |
| `canPlay` | | readonly | `boolean` | | Whether the video can play. |
| `controls` | `controls` | | `boolean` | | Whether to display controls over the video. |
| `currentTime` | `currentTime` | | `number` | | Video's current time |
| `dashManifest` | `dash-manifest` | | `string` | | URL to the MPEG-DASH manifest |
| `duration` | | readonly | `number` | | The duration of the video in seconds. |
| `ended` | | readonly | `boolean` | | Whether or not the video playback has ended. |
| `hlsManifest` | `hls-manifest` | | `string` | | URL to the HLS manifest |
| `loading` | `loading` | | `boolean` | false | Whether the video is loading |
| `muted` | `muted` | | `boolean` | false | Whether the video is muted. |
| `paused` | | readonly | `boolean` | | Whether the video is paused. |
| `playing` | `playing` | | `boolean` | | Whether the video is playing. |
| `poster` | `poster` | | `string` | | The src URL for the poster frame. |
| `preload` | `preload` | | `'none'\|'metadata'\|'auto'\|''` | "metadata" | Video element preload value. |
| `readyState` | | readonly | `number` | | Ready state of the video element. |
| `src` | `src` | | `string` | | URL to a video file |
| `volume` | | | `number` | 1 | The volume level of the video. |
## Methods
| Method | Type | Description |
|----------------|--------------------------------------------------|--------------------------------------------------|
| `load` | `(manifestUri: string, startTime?: number \| undefined, manifestMimeType?: string \| undefined): Promise` | Load a Manifest.
**startTime**: Optional start time, in seconds, to begin playback. Defaults to 0 for VOD and to the live edge for live. Set a positive number to start with a certain offset the beginning. Set a negative number to start with a certain offset from the end. This is intended for use with live streams, to start at a fixed offset from the live edge.
**manifestMimeType**: Optional mimetype registered using `shaka.media.ManifestParser.register(mimeType, ParserClass)` |
| `loadManifest` | `(manifestUri: string): Promise` | Load a manifest URL into shaka player. |
| `loadVideo` | `(url: string): string` | Load a regular video URL. |
| `pause` | `(): any` | Pauses the player. |
| `play` | `(): Promise` | Plays the player. |
| `unload` | `(reinitializeMediaSource?: boolean \| undefined): Promise` | Unload the current manifest and make the Player available for re-use.
**reinitializeMediaSource**: If true, start reinitializing MediaSource right away. This can improve load() latency for MediaSource-based playbacks. Defaults to true. |
## Events
| Event | Description |
|---------------------|-------------------------------------------------|
| `error` | fired when shaka player errors |
| `init-shaka-player` | fired when shaka player is initialized |
| `manifest-loaded` | fired when shaka player loads the manifest file |
## CSS Custom Properties
| Property | Description |
|-----------------------------------|--------------------------------------------------|
| `--shaka-player-background-color` | The background color of the video element. Default: `black` |
| `--shaka-player-object-fit` | object-fit property of the video element. Default: `initial` |
| `--shaka-player-video-height` | height property of the video element. Default: `auto` |
| `--shaka-player-video-width` | width property of the video element. Default: `100%` |