Skip to content

Commit 9f11065

Browse files
author
Nathan Tate
committed
feat(youtube-player): Add documentation to the README
1 parent dd548be commit 9f11065

File tree

3 files changed

+124
-6
lines changed

3 files changed

+124
-6
lines changed

‎src/youtube-player/BUILD.bazel

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ package(default_visibility = ["//visibility:public"])
33
load("//:packages.bzl", "ROLLUP_GLOBALS")
44
load(
55
"//tools:defaults.bzl",
6-
"markdown_to_html",
76
"ng_module",
87
"ng_package",
98
"ng_test_library",
@@ -54,11 +53,6 @@ ng_web_test_suite(
5453
deps = [":unit_test_sources"],
5554
)
5655

57-
markdown_to_html(
58-
name = "overview",
59-
srcs = [":youtube-player.md"],
60-
)
61-
6256
filegroup(
6357
name = "source-files",
6458
srcs = glob(["**/*.ts"]),

‎src/youtube-player/README.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Angular YouTube Player component
2+
3+
This component provides a simple angular wrapper around the embed [YouTube player API](https://developers.google.com/youtube/iframe_api_reference). File any bugs against the [angular/components repo](https://github.com/angular/components/issues).
4+
5+
## Installation
6+
7+
To install, run `npm install @angular/youtube-player`.
8+
9+
## Usage
10+
11+
Follow the following instructions for setting up the YouTube player component:
12+
13+
- First, follow the [instructions for installing the API script](https://developers.google.com/youtube/iframe_api_reference#Getting_Started).
14+
- Then make sure the API is available before bootstraping the YouTube Player component.
15+
- Provide find the video id by extracting it from the video URL.
16+
17+
## Example
18+
19+
If you're video is found at https://www.youtube.com/watch?v=PRQCAL_RMVo, then your video id is `PRQCAL_RMVo`.
20+
21+
```typescript
22+
// example-module.ts
23+
import {CommonModule} from '@angular/common';
24+
import {NgModule} from '@angular/core';
25+
import {YouTubePlayerModule} from '@angular/youtube-player';
26+
import {YoutubePlayerExample} from './example-component';
27+
28+
@NgModule({
29+
imports: [
30+
// Needed for ngIf directive.
31+
CommonModule,
32+
YouTubePlayerModule,
33+
],
34+
declarations: [YoutubePlayerExample],
35+
})
36+
export class YoutubePlayerExampleModule {
37+
}
38+
39+
// example-component.ts
40+
@Component({
41+
moduleId: module.id,
42+
template: '<youtube-player videoId="PRQCAL_RMVo" *ngIf="apiReady" />',
43+
selector: 'youtube-player-example',
44+
})
45+
class YoutubePlayerExample implements OnInit {
46+
/** Field preventing the YouTube player from bootstrapping until the api is ready. */
47+
apiReady = false;
48+
49+
constructor(private _ref: ChangeDetectorRef) {}
50+
51+
onInit() {
52+
// This code loads the IFrame Player API code asynchronously, according to the instructions at
53+
// https://developers.google.com/youtube/iframe_api_reference#Getting_Started
54+
var tag = document.createElement('script');
55+
56+
tag.src = "https://www.youtube.com/iframe_api";
57+
var firstScriptTag = document.getElementsByTagName('script')[0];
58+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
59+
60+
// This function is called by the YouTube iframe api once the script is ready.
61+
window.onYouTubeIframeAPIReady = () {
62+
// Allow the YouTube player to bootstrap.
63+
this.apiReady = true;
64+
65+
// Notify angular's change detection mechanism that something has changed.
66+
this._ref.detectChanges();
67+
};
68+
}
69+
}
70+
71+
```
72+
73+
## API
74+
75+
### Inputs
76+
77+
| Name | Type | Description |
78+
| ---- | ---- | ----------- |
79+
| videoId | string | The id of the YouTube video, extracted from the video URL. |
80+
| width (Optional) | number | The width of the video container. |
81+
| height (Optional) | number | The height of the video container. |
82+
| startSeconds (Optional) | number | The startSeconds parameter specifies the time from which the video should start playing. |
83+
| endSeconds (Optional) | number | The endSeconds parameter specifies the time when the video should stop playing. |
84+
| suggestedQuality (Optional) | string | The suggestedQuality parameter specifies the suggested playback quality for the video. See the [api reference](https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality) for valid values. |
85+
86+
### Outputs
87+
88+
The following outputs are proxies from the events specified in the [api documentation](https://developers.google.com/youtube/iframe_api_reference#Events). Check out the api documentation for more information about each event.
89+
90+
| Name | Description |
91+
| ---- | ----------- |
92+
| ready | See https://developers.google.com/youtube/iframe_api_reference#onReady
93+
| stateChange | See https://developers.google.com/youtube/iframe_api_reference#onStateChange
94+
| error | See https://developers.google.com/youtube/iframe_api_reference#onError
95+
| apiChange | See https://developers.google.com/youtube/iframe_api_reference#onApiChange
96+
| playbackQualityChange | See https://developers.google.com/youtube/iframe_api_reference#onPlaybackQualityChange
97+
| playbackRateChange | See https://developers.google.com/youtube/iframe_api_reference#onPlaybackRateChange
98+
99+
### Methods
100+
101+
The following methods are proxies to the individual methods specified in the [api documentation](https://developers.google.com/youtube/iframe_api_reference#Functions). Check out the api documentation for more information about each method. Please note that the methods result in a noop if the player is not ready to receive instructions (i.e. wait until the `ready` event is called before calling these methods.)
102+
103+
| Name | Description |
104+
| ---- | ----------- |
105+
| playVideo() | See https://developers.google.com/youtube/iframe_api_reference#playVideo |
106+
| pauseVideo() | See https://developers.google.com/youtube/iframe_api_reference#pauseVideo |
107+
| stopVideo() | See https://developers.google.com/youtube/iframe_api_reference#stopVideo |
108+
| seekTo(time: number) | See https://developers.google.com/youtube/iframe_api_reference#seekTo |
109+
| mute() | See https://developers.google.com/youtube/iframe_api_reference#mute |
110+
| unMute() | See https://developers.google.com/youtube/iframe_api_reference#unMute |
111+
| isMuted(): boolean | See https://developers.google.com/youtube/iframe_api_reference#isMuted |
112+
| setVolume(volume: number) | See https://developers.google.com/youtube/iframe_api_reference#setVolume |
113+
| getVolume(): number | See https://developers.google.com/youtube/iframe_api_reference#getVolume |
114+
| setPlaybackRate(playbackRate: number) | See https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate |
115+
| getPlaybackRate(): number | See https://developers.google.com/youtube/iframe_api_reference#getPlaybackRate |
116+
| getAvailablePlaybackRates(): number[] | See https://developers.google.com/youtube/iframe_api_reference#getAvailablePlaybackRates |
117+
| getVideoLoadedFraction(): number | See https://developers.google.com/youtube/iframe_api_reference#getVideoLoadedFraction |
118+
| getPlayerState(): YT.PlayerState | See https://developers.google.com/youtube/iframe_api_reference#getPlayerState |
119+
| getCurrentTime(): number | See https://developers.google.com/youtube/iframe_api_reference#getCurrentTime |
120+
| getPlaybackQuality(): YT.SuggestedQuality | See https://developers.google.com/youtube/iframe_api_reference#getPlaybackQuality |
121+
| getAvailableQualityLevels(): YT.SuggestedQuality[] | See https://developers.google.com/youtube/iframe_api_reference#getAvailableQualityLevels |
122+
| getDuration(): number | See https://developers.google.com/youtube/iframe_api_reference#getDuration |
123+
| getVideoUrl(): string | See https://developers.google.com/youtube/iframe_api_reference#getVideoUrl |
124+
| getVideoEmbedCode(): string | See https://developers.google.com/youtube/iframe_api_reference#getVideoEmbedCode |

‎src/youtube-player/youtube-player.md

Whitespace-only changes.

0 commit comments

Comments
 (0)