├── .npmignore
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── ci.yml
├── LICENSE
├── package.json
├── README.md
└── index.js


/.npmignore:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 |   - package-ecosystem: npm
 4 |     directory: /
 5 |     schedule:
 6 |       interval: daily
 7 |     labels:
 8 |       - dependency
 9 |     versioning-strategy: increase-if-necessary
10 |   - package-ecosystem: github-actions
11 |     directory: /
12 |     schedule:
13 |       interval: daily
14 |     labels:
15 |       - dependency
16 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | 'on':
 3 |   - push
 4 |   - pull_request
 5 | jobs:
 6 |   test:
 7 |     name: Node ${{ matrix.node }} / ${{ matrix.os }}
 8 |     runs-on: ${{ matrix.os }}
 9 |     strategy:
10 |       fail-fast: false
11 |       matrix:
12 |         os:
13 |           - ubuntu-latest
14 |         node:
15 |           - '14'
16 |     steps:
17 |       - uses: actions/checkout@v2
18 |       - uses: actions/setup-node@v2
19 |         with:
20 |           node-version: ${{ matrix.node }}
21 |       - run: npm install
22 |       - run: npm run build --if-present
23 |       - run: npm test
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Feross Aboukhadijeh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "yt-player",
 3 |   "description": "Simple, robust YouTube Iframe Player API",
 4 |   "version": "3.6.1",
 5 |   "author": {
 6 |     "name": "Feross Aboukhadijeh",
 7 |     "email": "feross@feross.org",
 8 |     "url": "https://feross.org"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/feross/yt-player/issues"
12 |   },
13 |   "dependencies": {
14 |     "load-script2": "^2.0.1"
15 |   },
16 |   "devDependencies": {
17 |     "standard": "*"
18 |   },
19 |   "homepage": "https://github.com/feross/yt-player",
20 |   "keywords": [
21 |     "youtube",
22 |     "youtube player",
23 |     "player",
24 |     "iframe",
25 |     "api",
26 |     "youtube api",
27 |     "youtube iframe api",
28 |     "iframe api",
29 |     "yt player",
30 |     "yt-player",
31 |     "youtube embed"
32 |   ],
33 |   "license": "MIT",
34 |   "main": "index.js",
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git://github.com/feross/yt-player.git"
38 |   },
39 |   "scripts": {
40 |     "test": "standard"
41 |   },
42 |   "funding": [
43 |     {
44 |       "type": "github",
45 |       "url": "https://github.com/sponsors/feross"
46 |     },
47 |     {
48 |       "type": "patreon",
49 |       "url": "https://www.patreon.com/feross"
50 |     },
51 |     {
52 |       "type": "consulting",
53 |       "url": "https://feross.org/support"
54 |     }
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # yt-player [![ci][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
  2 | 
  3 | [ci-image]: https://img.shields.io/github/workflow/status/feross/yt-player/ci/master
  4 | [ci-url]: https://github.com/feross/yt-player/actions
  5 | [npm-image]: https://img.shields.io/npm/v/yt-player.svg
  6 | [npm-url]: https://npmjs.org/package/yt-player
  7 | [downloads-image]: https://img.shields.io/npm/dm/yt-player.svg
  8 | [downloads-url]: https://npmjs.org/package/yt-player
  9 | [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
 10 | [standard-url]: https://standardjs.com
 11 | 
 12 | ### Simple, robust, blazing-fast YouTube Player API
 13 | 
 14 | This package is used on [Play.cash](https://play.cash).
 15 | 
 16 | ## Install
 17 | 
 18 | ```
 19 | npm install yt-player
 20 | ```
 21 | 
 22 | If you do not use a bundler, you can use the [standalone script](https://bundle.run/yt-player) directly in a `<script>` tag.
 23 | 
 24 | ## Why this package?
 25 | 
 26 | Most of the existing YouTube API packages on npm are incomplete or overcomplicated.
 27 | 
 28 | Note: It is irresponsible to publish a package that requires all of
 29 | `babel-runtime`, `lodash`, and 20KB of other nonsense to do a simple task. Using
 30 | fancy dependencies doesn't make you a better programmer, and it's certainly not a
 31 | "best practice" to ship tons of extra code to your website visitors. Less is more.
 32 | 🔥
 33 | 
 34 | ## Features
 35 | 
 36 |   - Powered by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference)
 37 |   - Lightweight - only 3.14kb gzipped and minified!
 38 |   - Extremely fast time-to-first-frame
 39 |     - YouTube IFrame API `<script>` is automatically loaded on first use
 40 |     - For even faster start time, add `<script src='https://www.youtube.com/iframe_api' async></script>` to your page
 41 |     - Automatically detects the presence of the API `<script>` so API is never loaded twice
 42 |   - API commands are automatically queued (until both the Iframe API and Player instance are ready)
 43 |   - Differentiate between *fatal* errors and *unplayable video* errors
 44 |   - Adds the all-important 'timeupdate' event, which the YouTube API lacks
 45 |   - Well-commented codebase makes it easy to understand what's going on
 46 |   - No large dependencies or unused code
 47 |   - Note: no support for old browsers (e.g. IE11 and below)
 48 | 
 49 | ## Usage
 50 | 
 51 | ```js
 52 | const YTPlayer = require('yt-player')
 53 | const player = new YTPlayer('#player')
 54 | 
 55 | player.load('GKSRyLdjsPA')
 56 | player.setVolume(100)
 57 | 
 58 | player.on('playing', () => {
 59 |   console.log(player.getDuration()) // => 351.521
 60 | })
 61 | ```
 62 | 
 63 | ## API
 64 | 
 65 | ### `player = new YTPlayer(element, [opts])`
 66 | 
 67 | Create a new YouTube player. The player will take the place of the HTML element
 68 | `element`. Alternatively, `element` can be a selector string, which will be passed
 69 | to `document.querySelector()`.
 70 | 
 71 | Examples: `#player`, `.youtube-player`, or a DOM node.
 72 | 
 73 | Optionally, provide an options object `opts` to customize the player.
 74 | 
 75 | #### `opts.width` (number)
 76 | 
 77 | This parameter indicates the width of the player.
 78 | 
 79 | #### `opts.height` (number)
 80 | 
 81 | This parameter indicates the height of the player.
 82 | 
 83 | #### `opts.autoplay` (boolean)
 84 | 
 85 | This parameter indicates whether the initial video will automatically start to play
 86 | when the player loads. The default value is `false`.
 87 | 
 88 | #### `opts.captions` (string/boolean)
 89 | 
 90 | This parameter indicates the language of the closed captions that should be
 91 | shown. The default behavior is based on user preference. The parameter value is
 92 | an [ISO 639-1 two-letter language
 93 | code](http://www.loc.gov/standards/iso639-2/php/code_list.php) or a fully
 94 | specified locale. Or, set to `false` to force captions to be disabled, ignoring
 95 | the user preference.
 96 | 
 97 | #### `opts.controls` (boolean)
 98 | 
 99 | This parameter indicates whether the video player controls are displayed. The
100 | default value is `true`.
101 | 
102 | #### `opts.keyboard` (boolean)
103 | 
104 | This parameter indicates whether the player will respond to keyboard shortcuts. The
105 | default value is `true`.
106 | 
107 | #### `opts.fullscreen` (boolean)
108 | 
109 | This parameter indicates whether the player will show a fullscreen button. The
110 | default value is `true`.
111 | 
112 | #### `opts.annotations` (boolean)
113 | 
114 | This parameter indicates whether the player will show video annotations. The
115 | default value is `true`.
116 | 
117 | #### `opts.modestBranding` (boolean)
118 | 
119 | This parameter lets you use a YouTube player that does not show a YouTube logo.
120 | Even when this option is enabled, a small YouTube text label will still display in
121 | the upper-right corner of a paused video when the user's mouse pointer hovers over
122 | the player. The default value is `false`.
123 | 
124 | #### `opts.related` (boolean)
125 | 
126 | This parameter indicates whether the player should show related videos from the
127 | same channel (`false`) or from any channel (`true`) when playback of the video
128 | ends. The default value is `true`.
129 | 
130 | #### `opts.timeupdateFrequency` (number)
131 | 
132 | The time between `onTimeupdate` callbacks, in milliseconds. Default is `1000`.
133 | 
134 | See:
135 | [`YT.Player` parameters](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
136 | and
137 | [`playerVars` parameters](https://developers.google.com/youtube/player_parameters#Parameters)
138 | for additional documentation about these parameters.
139 | 
140 | #### `opts.playsInline` (boolean)
141 | 
142 | This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Default is `true`.
143 | 
144 | #### `opts.start` (number)
145 | 
146 | This parameter causes the player to begin playing the video at the given number
147 | of seconds from the start of the video. The parameter value is a positive integer.
148 | Note that the player will look for the closest keyframe to the time you specify.
149 | This means that sometimes the play head may seek to just before the requested time,
150 | usually no more than around two seconds. Default is `0`.
151 | 
152 | #### `opts.host` (string)
153 | 
154 | This parameter controls the hostname that videos are loaded from. Set to `'https://www.youtube-nocookie.com'` for enhanced privacy. The default value is `'https://youtube.com'`.
155 | 
156 | ### `player.load(videoId, [autoplay, [start]])`
157 | 
158 | This function loads the specified `videoId`. An example of a `videoId` is
159 | `'GKSRyLdjsPA'`.
160 | 
161 | Optionally, specify an `autoplay` parameter to indicate whether the video should
162 | begin playing immediately, or wait for a call to `player.play()`. Default is
163 | `false`. The optional `start` parameter accepts a float/integer. If it is specified,
164 | then the video will start from the closest keyframe to the specified time.
165 | 
166 | This should be the first function called on a new `Player` instance.
167 | 
168 | ### `player.play()`
169 | 
170 | Plays the currently loaded video.
171 | 
172 | ### `player.pause()`
173 | 
174 | Pauses the currently loaded video.
175 | 
176 | ### `player.stop()`
177 | 
178 | Stops and cancels loading of the current video. This function should be reserved
179 | for rare situations when you know that the user will not be watching additional
180 | video in the player. If your intent is to pause the video, you should just call
181 | `pause()`. If you want to change the video that the player is playing,
182 | you can call `load()` without calling `stop()` first.
183 | 
184 | ### `player.seek(seconds)`
185 | 
186 | Seeks to a specified time in the video. If the player is paused when the function
187 | is called, it will remain paused. If the function is called from another state
188 | (playing, video cued, etc.), the player will play the video. The player will
189 | advance to the closest keyframe before that time unless the player has already
190 | downloaded the portion of the video to which the user is seeking.
191 | 
192 | ### `player.setVolume(volume)`
193 | 
194 | Sets the volume. Accepts an integer between `0` and `100`.
195 | 
196 | ### `player.getVolume()`
197 | 
198 | Returns the player's current volume, an integer between `0` and `100`. Note that
199 | `getVolume()` will return the volume even if the player is muted.
200 | 
201 | ### `player.mute()`
202 | 
203 | Mutes the player.
204 | 
205 | ### `player.unMute()`
206 | 
207 | Unmutes the player.
208 | 
209 | ### `player.isMuted()`
210 | 
211 | Returns true if the player is muted, false if not.
212 | 
213 | ### `player.setSize(width, height)`
214 | 
215 | Sets the size in pixels of the `<iframe>` that contains the player.
216 | 
217 | ### `player.setPlaybackRate(rate)`
218 | 
219 | This function sets the suggested playback rate for the current video. If the
220 | playback rate changes, it will only change for the video that is already being
221 | played. Calling `load()` will reset the playback rate to 1.
222 | 
223 | ### `player.setPlaybackQuality(suggestedQuality)`
224 | 
225 | This function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the `'playbackqualitychange'` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackQuality` function.
226 | 
227 | The `suggestedQuality` parameter value can be `'small'`, `'medium'`, `'large'`, `'hd720'`, `'hd1080'`, `'highres'` or `'default'`. We recommend that you set the parameter value to `'default'`, which instructs YouTube to select the most appropriate playback quality, which will vary for different users, videos, systems and other playback conditions.
228 | 
229 | If you call the `setPlaybackQuality` function with a `suggestedQuality` level that is not available for the video, then the quality will be set to the next lowest level that is available. In addition, setting `suggestedQuality` to a value that is not a recognized quality level is equivalent to setting `suggestedQuality` to `'default'`.
230 | 
231 | ### `player.getPlaybackRate()`
232 | 
233 | This function retrieves the playback rate of the currently playing video. The
234 | default playback rate is `1`, which indicates that the video is playing at normal
235 | speed. Playback rates may include values like `0.25`, `0.5`, `1`, `1.5`, and `2`.
236 | 
237 | ### `player.getAvailablePlaybackRates()`
238 | 
239 | This function returns the set of playback rates in which the current video is
240 | available. The default value is `1`, which indicates that the video is playing in
241 | normal speed.
242 | 
243 | The function returns an array of numbers ordered from slowest to fastest playback
244 | speed. Even if the player does not support variable playback speeds, the array
245 | should always contain at least one value (`1`).
246 | 
247 | ### `player.getDuration()`
248 | 
249 | Returns the duration in seconds of the currently playing video. Note that
250 | `getDuration()` will return 0 until the video's metadata is loaded, which normally
251 | happens just before the video starts playing.
252 | 
253 | ### `player.getProgress()`
254 | 
255 | Returns a number between `0` and `1` that specifies the percentage of the video
256 | that the player shows as buffered.
257 | 
258 | ### `player.getState()`
259 | 
260 | Returns the state of the player. Possible values are: `'unstarted'`, `'ended'`,
261 | `'playing'`, `'paused'`, `'buffering'`, or `'cued'`.
262 | 
263 | ### `player.getCurrentTime()`
264 | 
265 | Returns the elapsed time in seconds since the video started playing.
266 | 
267 | ### `player.destroy()`
268 | 
269 | Removes the `<iframe>` containing the player and cleans up all resources.
270 | 
271 | ### `player.destroyed` (boolean)
272 | 
273 | Returns `true` if `destroy()` has been called on the player.
274 | 
275 | ### `player.videoId` (string)
276 | 
277 | Returns the currently loaded video ID, i.e. what was passed to `load()`.
278 | 
279 | ### `player.on('error', (err) => {})`
280 | 
281 | This event fires if a fatal error occurs in the player. This does not include
282 | videos that fail to play, for whatever reason.
283 | 
284 | ### `player.on('unplayable', (videoId) => {})`
285 | 
286 | This event fires if the YouTube player cannot play the given video. This is not a
287 | fatal error. This event is reported separately from the `'error'` event so
288 | there is an opportunity to play another video gracefully.
289 | 
290 | Possible reasons for this error:
291 | 
292 | - The video requested was not found. This error occurs when a video has been
293 |   removed (for any reason) or has been marked as private.
294 | 
295 | - The owner of the requested video does not allow it to be played in embedded
296 |   players.
297 | 
298 | - The request contains an invalid parameter value. For example, this error occurs
299 |   if you specify a videoId that does not have 11 characters, or if the videoId contains invalid characters, such as exclamation points or asterisks.
300 | 
301 | ### `player.on('timeupdate', (seconds) => {})`
302 | 
303 | This event fires when the time indicated by the `getCurrentTime()` method has been
304 | updated.
305 | 
306 | ### `player.on('unstarted', () => {})`
307 | ### `player.on('ended', () => {})`
308 | ### `player.on('playing', () => {})`
309 | ### `player.on('paused', () => {})`
310 | ### `player.on('buffering', () => {})`
311 | ### `player.on('cued', () => {})`
312 | 
313 | These events fire when the player enters the respective state. These event names
314 | are the same as the possible return values from `player.getState()`.
315 | 
316 | When the player first loads a video, it will broadcast an `unstarted` event. When a
317 | video is cued and ready to play, the player will broadcast a `cued` event.
318 | 
319 | ### `player.on('playbackQualityChange', (quality) => {})`
320 | 
321 | This event fires whenever the video playback quality changes. Possible
322 | values are: 'small', 'medium', 'large', 'hd720', 'hd1080', 'highres'.
323 | 
324 | ### `player.on('playbackRateChange', (playbackRate) => {})`
325 | 
326 | This event fires whenever the video playback rate changes.
327 | 
328 | ## License
329 | 
330 | MIT. Copyright (c) [Feross Aboukhadijeh](https://feross.org).
331 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | /*! yt-player. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
  2 | const EventEmitter = require('events').EventEmitter
  3 | const loadScript = require('load-script2')
  4 | 
  5 | const YOUTUBE_IFRAME_API_SRC = 'https://www.youtube.com/iframe_api'
  6 | 
  7 | const YOUTUBE_STATES = {
  8 |   '-1': 'unstarted',
  9 |   0: 'ended',
 10 |   1: 'playing',
 11 |   2: 'paused',
 12 |   3: 'buffering',
 13 |   5: 'cued'
 14 | }
 15 | 
 16 | const YOUTUBE_ERROR = {
 17 |   // The request contains an invalid parameter value. For example, this error
 18 |   // occurs if you specify a videoId that does not have 11 characters, or if the
 19 |   // videoId contains invalid characters, such as exclamation points or asterisks.
 20 |   INVALID_PARAM: 2,
 21 | 
 22 |   // The requested content cannot be played in an HTML5 player or another error
 23 |   // related to the HTML5 player has occurred.
 24 |   HTML5_ERROR: 5,
 25 | 
 26 |   // The video requested was not found. This error occurs when a video has been
 27 |   // removed (for any reason) or has been marked as private.
 28 |   NOT_FOUND: 100,
 29 | 
 30 |   // The owner of the requested video does not allow it to be played in embedded
 31 |   // players.
 32 |   UNPLAYABLE_1: 101,
 33 | 
 34 |   // This error is the same as 101. It's just a 101 error in disguise!
 35 |   UNPLAYABLE_2: 150
 36 | }
 37 | 
 38 | const loadIframeAPICallbacks = []
 39 | 
 40 | /**
 41 |  * YouTube Player. Exposes a better API, with nicer events.
 42 |  * @param {HTMLElement|selector} element
 43 |  */
 44 | class YouTubePlayer extends EventEmitter {
 45 |   constructor (element, opts) {
 46 |     super()
 47 | 
 48 |     const elem = typeof element === 'string'
 49 |       ? document.querySelector(element)
 50 |       : element
 51 | 
 52 |     if (elem.id) {
 53 |       this._id = elem.id // use existing element id
 54 |     } else {
 55 |       this._id = elem.id = 'ytplayer-' + Math.random().toString(16).slice(2, 8)
 56 |     }
 57 | 
 58 |     this._opts = Object.assign({
 59 |       width: 640,
 60 |       height: 360,
 61 |       autoplay: false,
 62 |       captions: undefined,
 63 |       controls: true,
 64 |       keyboard: true,
 65 |       fullscreen: true,
 66 |       annotations: true,
 67 |       modestBranding: false,
 68 |       related: true,
 69 |       timeupdateFrequency: 1000,
 70 |       playsInline: true,
 71 |       start: 0
 72 |     }, opts)
 73 | 
 74 |     this.videoId = null
 75 |     this.destroyed = false
 76 | 
 77 |     this._api = null
 78 |     this._autoplay = false // autoplay the first video?
 79 |     this._player = null
 80 |     this._ready = false // is player ready?
 81 |     this._queue = []
 82 | 
 83 |     this._interval = null
 84 | 
 85 |     // Setup listeners for 'timeupdate' events. The YouTube Player does not fire
 86 |     // 'timeupdate' events, so they are simulated using a setInterval().
 87 |     this._startInterval = this._startInterval.bind(this)
 88 |     this._stopInterval = this._stopInterval.bind(this)
 89 | 
 90 |     this.on('playing', this._startInterval)
 91 |     this.on('unstarted', this._stopInterval)
 92 |     this.on('ended', this._stopInterval)
 93 |     this.on('paused', this._stopInterval)
 94 |     this.on('buffering', this._stopInterval)
 95 | 
 96 |     this._loadIframeAPI((err, api) => {
 97 |       if (err) return this._destroy(new Error('YouTube Iframe API failed to load'))
 98 |       this._api = api
 99 | 
100 |       // If load(videoId, [autoplay, [size]]) was called before Iframe API
101 |       // loaded, ensure it gets called again now
102 |       if (this.videoId) this.load(this.videoId, this._autoplay, this._start)
103 |     })
104 |   }
105 | 
106 |   load (videoId, autoplay = false, start = 0) {
107 |     if (this.destroyed) return
108 | 
109 |     this.videoId = videoId
110 |     this._autoplay = autoplay
111 |     this._start = start
112 | 
113 |     // If the Iframe API is not ready yet, do nothing. Once the Iframe API is
114 |     // ready, `load(this.videoId)` will be called.
115 |     if (!this._api) return
116 | 
117 |     // If there is no player instance, create one.
118 |     if (!this._player) {
119 |       this._createPlayer(videoId)
120 |       return
121 |     }
122 | 
123 |     // If the player instance is not ready yet, do nothing. Once the player
124 |     // instance is ready, `load(this.videoId)` will be called. This ensures that
125 |     // the last call to `load()` is the one that takes effect.
126 |     if (!this._ready) return
127 | 
128 |     // If the player instance is ready, load the given `videoId`.
129 |     if (autoplay) {
130 |       this._player.loadVideoById(videoId, start)
131 |     } else {
132 |       this._player.cueVideoById(videoId, start)
133 |     }
134 |   }
135 | 
136 |   play () {
137 |     if (this._ready) this._player.playVideo()
138 |     else this._queueCommand('play')
139 |   }
140 | 
141 |   pause () {
142 |     if (this._ready) this._player.pauseVideo()
143 |     else this._queueCommand('pause')
144 |   }
145 | 
146 |   stop () {
147 |     if (this._ready) this._player.stopVideo()
148 |     else this._queueCommand('stop')
149 |   }
150 | 
151 |   seek (seconds) {
152 |     if (this._ready) this._player.seekTo(seconds, true)
153 |     else this._queueCommand('seek', seconds)
154 |   }
155 | 
156 |   setVolume (volume) {
157 |     if (this._ready) this._player.setVolume(volume)
158 |     else this._queueCommand('setVolume', volume)
159 |   }
160 | 
161 |   getVolume () {
162 |     return (this._ready && this._player.getVolume()) || 0
163 |   }
164 | 
165 |   mute () {
166 |     if (this._ready) this._player.mute()
167 |     else this._queueCommand('mute')
168 |   }
169 | 
170 |   unMute () {
171 |     if (this._ready) this._player.unMute()
172 |     else this._queueCommand('unMute')
173 |   }
174 | 
175 |   isMuted () {
176 |     return (this._ready && this._player.isMuted()) || false
177 |   }
178 | 
179 |   setSize (width, height) {
180 |     if (this._ready) this._player.setSize(width, height)
181 |     else this._queueCommand('setSize', width, height)
182 |   }
183 | 
184 |   setPlaybackRate (rate) {
185 |     if (this._ready) this._player.setPlaybackRate(rate)
186 |     else this._queueCommand('setPlaybackRate', rate)
187 |   }
188 | 
189 |   setPlaybackQuality (suggestedQuality) {
190 |     if (this._ready) this._player.setPlaybackQuality(suggestedQuality)
191 |     else this._queueCommand('setPlaybackQuality', suggestedQuality)
192 |   }
193 | 
194 |   getPlaybackRate () {
195 |     return (this._ready && this._player.getPlaybackRate()) || 1
196 |   }
197 | 
198 |   getAvailablePlaybackRates () {
199 |     return (this._ready && this._player.getAvailablePlaybackRates()) || [1]
200 |   }
201 | 
202 |   getDuration () {
203 |     return (this._ready && this._player.getDuration()) || 0
204 |   }
205 | 
206 |   getProgress () {
207 |     return (this._ready && this._player.getVideoLoadedFraction()) || 0
208 |   }
209 | 
210 |   getState () {
211 |     return (this._ready && YOUTUBE_STATES[this._player.getPlayerState()]) || 'unstarted'
212 |   }
213 | 
214 |   getCurrentTime () {
215 |     return (this._ready && this._player.getCurrentTime()) || 0
216 |   }
217 | 
218 |   destroy () {
219 |     this._destroy()
220 |   }
221 | 
222 |   _destroy (err) {
223 |     if (this.destroyed) return
224 |     this.destroyed = true
225 | 
226 |     if (this._player) {
227 |       this._player.stopVideo && this._player.stopVideo()
228 |       this._player.destroy()
229 |     }
230 | 
231 |     this.videoId = null
232 | 
233 |     this._id = null
234 |     this._opts = null
235 |     this._api = null
236 |     this._player = null
237 |     this._ready = false
238 |     this._queue = null
239 | 
240 |     this._stopInterval()
241 | 
242 |     this.removeListener('playing', this._startInterval)
243 |     this.removeListener('paused', this._stopInterval)
244 |     this.removeListener('buffering', this._stopInterval)
245 |     this.removeListener('unstarted', this._stopInterval)
246 |     this.removeListener('ended', this._stopInterval)
247 | 
248 |     if (err) this.emit('error', err)
249 |   }
250 | 
251 |   _queueCommand (command, ...args) {
252 |     if (this.destroyed) return
253 |     this._queue.push([command, args])
254 |   }
255 | 
256 |   _flushQueue () {
257 |     while (this._queue.length) {
258 |       const command = this._queue.shift()
259 |       this[command[0]].apply(this, command[1])
260 |     }
261 |   }
262 | 
263 |   _loadIframeAPI (cb) {
264 |     // If API is loaded, there is nothing else to do
265 |     if (window.YT && typeof window.YT.Player === 'function') {
266 |       return cb(null, window.YT)
267 |     }
268 | 
269 |     // Otherwise, queue callback until API is loaded
270 |     loadIframeAPICallbacks.push(cb)
271 | 
272 |     const scripts = Array.from(document.getElementsByTagName('script'))
273 |     const isLoading = scripts.some(script => script.src === YOUTUBE_IFRAME_API_SRC)
274 | 
275 |     // If API <script> tag is not present in the page, inject it. Ensures that
276 |     // if user includes a hardcoded <script> tag in HTML for performance, another
277 |     // one will not be added
278 |     if (!isLoading) {
279 |       loadScript(YOUTUBE_IFRAME_API_SRC).catch(err => {
280 |         while (loadIframeAPICallbacks.length) {
281 |           const loadCb = loadIframeAPICallbacks.shift()
282 |           loadCb(err)
283 |         }
284 |       })
285 |     }
286 | 
287 |     const prevOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady
288 |     window.onYouTubeIframeAPIReady = () => {
289 |       if (typeof prevOnYouTubeIframeAPIReady === 'function') {
290 |         prevOnYouTubeIframeAPIReady()
291 |       }
292 |       while (loadIframeAPICallbacks.length) {
293 |         const loadCb = loadIframeAPICallbacks.shift()
294 |         loadCb(null, window.YT)
295 |       }
296 |     }
297 |   }
298 | 
299 |   _createPlayer (videoId) {
300 |     if (this.destroyed) return
301 | 
302 |     const opts = this._opts
303 | 
304 |     this._player = new this._api.Player(this._id, {
305 |       width: opts.width,
306 |       height: opts.height,
307 |       videoId: videoId,
308 | 
309 |       // (Not part of documented API) This parameter controls the hostname that
310 |       // videos are loaded from. Set to `'https://www.youtube-nocookie.com'`
311 |       // for enhanced privacy.
312 |       host: opts.host,
313 | 
314 |       playerVars: {
315 |         // This parameter specifies whether the initial video will automatically
316 |         // start to play when the player loads. Supported values are 0 or 1. The
317 |         // default value is 0.
318 |         autoplay: opts.autoplay ? 1 : 0,
319 | 
320 |         // Setting the parameter's value to 1 causes closed captions to be shown
321 |         // by default, even if the user has turned captions off. The default
322 |         // behavior is based on user preference.
323 |         cc_load_policy: opts.captions != null
324 |           ? opts.captions !== false ? 1 : 0
325 |           : undefined, // default to not setting this option
326 | 
327 |         // Sets the player's interface language. The parameter value is an ISO
328 |         // 639-1 two-letter language code or a fully specified locale. For
329 |         // example, fr and fr-ca are both valid values. Other language input
330 |         // codes, such as IETF language tags (BCP 47) might also be handled
331 |         // properly.
332 |         hl: (opts.captions != null && opts.captions !== false)
333 |           ? opts.captions
334 |           : undefined, // default to not setting this option
335 | 
336 |         // This parameter specifies the default language that the player will
337 |         // use to display captions. Set the parameter's value to an ISO 639-1
338 |         // two-letter language code.
339 |         cc_lang_pref: (opts.captions != null && opts.captions !== false)
340 |           ? opts.captions
341 |           : undefined, // default to not setting this option
342 | 
343 |         // This parameter indicates whether the video player controls are
344 |         // displayed. For IFrame embeds that load a Flash player, it also defines
345 |         // when the controls display in the player as well as when the player
346 |         // will load. Supported values are:
347 |         //   - controls=0 – Player controls do not display in the player. For
348 |         //                  IFrame embeds, the Flash player loads immediately.
349 |         //   - controls=1 – (default) Player controls display in the player. For
350 |         //                  IFrame embeds, the controls display immediately and
351 |         //                  the Flash player also loads immediately.
352 |         //   - controls=2 – Player controls display in the player. For IFrame
353 |         //                  embeds, the controls display and the Flash player
354 |         //                  loads after the user initiates the video playback.
355 |         controls: opts.controls ? 2 : 0,
356 | 
357 |         // Setting the parameter's value to 1 causes the player to not respond to
358 |         // keyboard controls. The default value is 0, which means that keyboard
359 |         // controls are enabled.
360 |         disablekb: opts.keyboard ? 0 : 1,
361 | 
362 |         // Setting the parameter's value to 1 enables the player to be
363 |         // controlled via IFrame or JavaScript Player API calls. The default
364 |         // value is 0, which means that the player cannot be controlled using
365 |         // those APIs.
366 |         enablejsapi: 1,
367 | 
368 |         // Setting this parameter to 0 prevents the fullscreen button from
369 |         // displaying in the player. The default value is 1, which causes the
370 |         // fullscreen button to display.
371 |         fs: opts.fullscreen ? 1 : 0,
372 | 
373 |         // Setting the parameter's value to 1 causes video annotations to be
374 |         // shown by default, whereas setting to 3 causes video annotations to not
375 |         // be shown by default. The default value is 1.
376 |         iv_load_policy: opts.annotations ? 1 : 3,
377 | 
378 |         // This parameter lets you use a YouTube player that does not show a
379 |         // YouTube logo. Set the parameter value to 1 to prevent the YouTube logo
380 |         // from displaying in the control bar. Note that a small YouTube text
381 |         // label will still display in the upper-right corner of a paused video
382 |         // when the user's mouse pointer hovers over the player.
383 |         modestbranding: opts.modestBranding ? 1 : 0,
384 | 
385 |         // This parameter provides an extra security measure for the IFrame API
386 |         // and is only supported for IFrame embeds. If you are using the IFrame
387 |         // API, which means you are setting the enablejsapi parameter value to 1,
388 |         // you should always specify your domain as the origin parameter value.
389 |         origin: window.location.origin,
390 | 
391 |         // This parameter controls whether videos play inline or fullscreen in an
392 |         // HTML5 player on iOS. Valid values are:
393 |         //   - 0: This value causes fullscreen playback. This is currently the
394 |         //        default value, though the default is subject to change.
395 |         //   - 1: This value causes inline playback for UIWebViews created with
396 |         //        the allowsInlineMediaPlayback property set to TRUE.
397 |         playsinline: opts.playsInline ? 1 : 0,
398 | 
399 |         // This parameter indicates whether the player should show related
400 |         // videos from the same channel (0) or from any channel (1) when
401 |         // playback of the video ends. The default value is 1.
402 |         rel: opts.related ? 1 : 0,
403 | 
404 |         // (Not part of documented API) Allow html elements with higher z-index
405 |         // to be shown on top of the YouTube player.
406 |         wmode: 'opaque',
407 | 
408 |         // This parameter causes the player to begin playing the video at the given number
409 |         // of seconds from the start of the video. The parameter value is a positive integer.
410 |         // Note that similar to the seek function, the player will look for the closest
411 |         // keyframe to the time you specify. This means that sometimes the play head may seek
412 |         // to just before the requested time, usually no more than around two seconds.
413 |         start: opts.start
414 |       },
415 |       events: {
416 |         onReady: () => this._onReady(videoId),
417 |         onStateChange: (data) => this._onStateChange(data),
418 |         onPlaybackQualityChange: (data) => this._onPlaybackQualityChange(data),
419 |         onPlaybackRateChange: (data) => this._onPlaybackRateChange(data),
420 |         onError: (data) => this._onError(data)
421 |       }
422 |     })
423 |   }
424 | 
425 |   /**
426 |    * This event fires when the player has finished loading and is ready to begin
427 |    * receiving API calls.
428 |    */
429 |   _onReady (videoId) {
430 |     if (this.destroyed) return
431 | 
432 |     this._ready = true
433 | 
434 |     // Once the player is ready, always call `load(videoId, [autoplay, [size]])`
435 |     // to handle these possible cases:
436 |     //
437 |     //   1. `load(videoId, true)` was called before the player was ready. Ensure that
438 |     //      the selected video starts to play.
439 |     //
440 |     //   2. `load(videoId, false)` was called before the player was ready. Now the
441 |     //      player is ready and there's nothing to do.
442 |     //
443 |     //   3. `load(videoId, [autoplay])` was called multiple times before the player
444 |     //      was ready. Therefore, the player was initialized with the wrong videoId,
445 |     //      so load the latest videoId and potentially autoplay it.
446 |     this.load(this.videoId, this._autoplay, this._start)
447 | 
448 |     this._flushQueue()
449 |   }
450 | 
451 |   /**
452 |    * Called when the player's state changes. We emit friendly events so the user
453 |    * doesn't need to use YouTube's YT.PlayerState.* event constants.
454 |    */
455 |   _onStateChange (data) {
456 |     if (this.destroyed) return
457 | 
458 |     const state = YOUTUBE_STATES[data.data]
459 | 
460 |     if (state) {
461 |       // Send a 'timeupdate' anytime the state changes. When the video halts for any
462 |       // reason ('paused', 'buffering', or 'ended') no further 'timeupdate' events
463 |       // should fire until the video unhalts.
464 |       if (['paused', 'buffering', 'ended'].includes(state)) this._onTimeupdate()
465 | 
466 |       this.emit(state)
467 | 
468 |       // When the video changes ('unstarted' or 'cued') or starts ('playing') then a
469 |       // 'timeupdate' should follow afterwards (never before!) to reset the time.
470 |       if (['unstarted', 'playing', 'cued'].includes(state)) this._onTimeupdate()
471 |     } else {
472 |       throw new Error('Unrecognized state change: ' + data)
473 |     }
474 |   }
475 | 
476 |   /**
477 |    * This event fires whenever the video playback quality changes. Possible
478 |    * values are: 'small', 'medium', 'large', 'hd720', 'hd1080', 'highres'.
479 |    */
480 |   _onPlaybackQualityChange (data) {
481 |     if (this.destroyed) return
482 |     this.emit('playbackQualityChange', data.data)
483 |   }
484 | 
485 |   /**
486 |    * This event fires whenever the video playback rate changes.
487 |    */
488 |   _onPlaybackRateChange (data) {
489 |     if (this.destroyed) return
490 |     this.emit('playbackRateChange', data.data)
491 |   }
492 | 
493 |   /**
494 |    * This event fires if an error occurs in the player.
495 |    */
496 |   _onError (data) {
497 |     if (this.destroyed) return
498 | 
499 |     const code = Number(data.data)
500 | 
501 |     // The HTML5_ERROR error occurs when the YouTube player needs to switch from
502 |     // HTML5 to Flash to show an ad. Ignore it.
503 |     if (code === YOUTUBE_ERROR.HTML5_ERROR) return
504 | 
505 |     // The remaining error types occur when the YouTube player cannot play the
506 |     // given video. This is not a fatal error. Report it as unplayable so the user
507 |     // has an opportunity to play another video.
508 |     if (code === YOUTUBE_ERROR.UNPLAYABLE_1 ||
509 |         code === YOUTUBE_ERROR.UNPLAYABLE_2 ||
510 |         code === YOUTUBE_ERROR.NOT_FOUND ||
511 |         code === YOUTUBE_ERROR.INVALID_PARAM) {
512 |       return this.emit('unplayable', this.videoId)
513 |     }
514 | 
515 |     // Unexpected error, does not match any known type
516 |     this._destroy(new Error('YouTube Player Error. Unknown error code: ' + code))
517 |   }
518 | 
519 |   /**
520 |    * This event fires when the time indicated by the `getCurrentTime()` method
521 |    * has been updated.
522 |    */
523 |   _onTimeupdate () {
524 |     this.emit('timeupdate', this.getCurrentTime())
525 |   }
526 | 
527 |   _startInterval () {
528 |     this._interval = setInterval(() => this._onTimeupdate(), this._opts.timeupdateFrequency)
529 |   }
530 | 
531 |   _stopInterval () {
532 |     clearInterval(this._interval)
533 |     this._interval = null
534 |   }
535 | }
536 | 
537 | module.exports = YouTubePlayer
538 | 


--------------------------------------------------------------------------------