Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pandawhisperer/svelte-youtube
YouTube IFrame Player API for Svelte
https://github.com/pandawhisperer/svelte-youtube
svelte svelte-component svelte-v3 video video-player youtube youtube-api
Last synced: about 16 hours ago
JSON representation
YouTube IFrame Player API for Svelte
- Host: GitHub
- URL: https://github.com/pandawhisperer/svelte-youtube
- Owner: PandaWhisperer
- Created: 2020-01-06T23:27:01.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-20T01:11:28.000Z (10 months ago)
- Last Synced: 2024-10-28T17:18:06.791Z (20 days ago)
- Topics: svelte, svelte-component, svelte-v3, video, video-player, youtube, youtube-api
- Language: Svelte
- Size: 23.4 KB
- Stars: 21
- Watchers: 3
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# svelte-youtube
Simple [Svelte](https://svelte.dev/) component acting as a thin layer over the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference). Based on [react-youtube](https://github.com/tjallingt/react-youtube).
## Features
- URL playback (soon)
- [playback event bindings](https://developers.google.com/youtube/iframe_api_reference#Events)
- [customizable player options](https://developers.google.com/youtube/player_parameters)
## NOTICE
I currently don't have the time to maintain this package, as I am not actively working on any Svelte app. If you are interested in maintaining the NPM package going forward, please send me an email.
## Installation
```
$ npm install svelte-youtube
```
## Usage
```js
import YouTube from 'svelte-youtube';
null
id={string} // defaults -> null
class={string} // defaults -> null
options={obj} // defaults -> {}
/>
```
## Events
The following events are available:
- `on:ready`: Player has finished loading and is ready to play
- `on:play`: Playback has started
- `on:pause`: Playback has been paused
- `on:end`: Playback has ended
- `on:error`: An error has occurred (see below)
- `on:stateChange`: Player State has changed (see below)
- `on:playbackRateChange`: Playback rate has changed (see below)
- `on:playbackQualityChange`: Playback quality has changed (see below)
Each event's `detail` property contains a `data` and a `target` property (except for the `ready` event, which does not have a `data` property). The `target` is a reference to the player instance, while the `data` contains information specific to the event.
For details on the contents of the `data` property, and for a more detailed description of each event, refer to the [YouTube IFrame Player API Events](https://developers.google.com/youtube/iframe_api_reference#Events) .
### Player State
For convenience it is also possible to access the PlayerState constants through svelte-youtube.
The `PlayerState` named export contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange).
### Player Errors
Refer to [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onError) for an explanation of the error codes used in the `on:error` event.
## Controlling the player
Each of the component's events contains a `target` property in the event's `detail` object.
This property contains a reference to the underlying player instance.
Once you have an instance of the player object, you may call any of the [available functions](https://developers.google.com/youtube/iframe_api_reference#Functions) on it.
## Example
```js
import YouTube from 'svelte-youtube';
const options = {
height: '390',
width: '640',
// see https://developers.google.com/youtube/player_parameters
playerVars: {
autoplay: 1
}
};
function onReady(event) {
// access to player in all event handlers via event.target
event.target.pauseVideo();
}
```
## License
MIT