ニジカ投稿局 https://tv.nizika.tv
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

embeds.md 8.0 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. # PeerTube Embed API
  2. PeerTube lets you embed videos and programmatically control their playback. This documentation covers how to interact with the PeerTube Embed API.
  3. ## Playground
  4. Any PeerTube embed URL (ie `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a`) can be viewed as an embedding playground which
  5. allows you to test various aspects of PeerTube embeds. Simply replace `/embed` with `/test-embed` and visit the URL in a browser.
  6. For instance, the playground URL for the above embed URL is `https://my-instance.example.com/videos/test-embed/52a10666-3a18-4e73-93da-e8d3c12c305a`.
  7. ## Quick Start
  8. Given an existing PeerTube embed `<iframe>` **with API enabled** (`https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a?api=1`),
  9. one can use the PeerTube Embed API to control it by first including the library. You can include it via Yarn with:
  10. ```
  11. yarn add @peertube/embed-api
  12. ```
  13. Now just use the `PeerTubePlayer` class exported by the module:
  14. ```typescript
  15. import { PeerTubePlayer } from '@peertube/embed-api.js'
  16. ...
  17. ```
  18. Or use the minified build from NPM CDN in your HTML file:
  19. ```
  20. <script src="https://unpkg.com/@peertube/embed-api/build/player.min.js"></script>
  21. <script>
  22. const PeerTubePlayer = window['PeerTubePlayer']
  23. ...
  24. </script>
  25. ```
  26. Then you can instantiate the player:
  27. ```typescript
  28. let player = new PeerTubePlayer(document.querySelector('iframe'))
  29. await player.ready // wait for the player to be ready
  30. // now you can use it!
  31. player.play()
  32. player.seek(32)
  33. player.pause()
  34. ```
  35. ## Embed URL parameters
  36. You can customize PeerTube player by specifying URL query parameters.
  37. For example `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a?start=1s&stop=18s&loop=1&autoplay=1&muted=1&warningTitle=0&controlBar=0&peertubeLink=0&p2p=0`
  38. ### start
  39. Start the video at a specific time.
  40. Value must be raw seconds or a duration (`3m4s`)
  41. Default: starts at `0`
  42. ### stop
  43. Stop the video at a specific time.
  44. Value must be raw seconds or a duration (`54s`)
  45. Default: ends at content end
  46. ### controls
  47. Mimics video HTML element `controls` attribute, meaning that all controls (including big play button, control bar, etc.) will be removed.
  48. It can be useful if you want to have a full control of the PeerTube player.
  49. Value must be `0` or `1`.
  50. Default: `1`
  51. ### controlBar
  52. Hide control bar when the video is played.
  53. Value must be `0` or `1`.
  54. Default: `1`
  55. ### peertubeLink
  56. Hide PeerTube instance link in control bar.
  57. Value must be `0` or `1`.
  58. Default: `1`
  59. ### muted
  60. Mute the video by default.
  61. Value must be `0` or `1`.
  62. Default: tries to restore the last muted setting set by the user
  63. ### loop
  64. Automatically start again the video when it ends.
  65. Value must be `0` or `1`.
  66. Default: `0`
  67. ### subtitle
  68. Auto select a subtitle by default.
  69. Value must be a valid subtitle ISO code (`fr`, `en`, etc.).
  70. Default: no subtitle selected and then tries to restore the last subtitle set by the user
  71. ### autoplay
  72. Try to automatically play the video.
  73. Most web browsers disable video autoplay if the user did not interact with the video. You can try to bypass this limitation by muting the video
  74. Value must be `0` or `1`.
  75. Default: `0`
  76. ### playbackRate
  77. Force the default playback rate (`0.75`, `1.5` etc).
  78. Default: `1`
  79. ### title
  80. Show/Hide embed title.
  81. Value must be `0` or `1`.
  82. Default: `1`
  83. ### warningTitle
  84. Show/Hide P2P warning title.
  85. Value must be `0` or `1`.
  86. Default: `1`
  87. ### p2p
  88. Enable/Disable P2P.
  89. Value must be `0` or `1`.
  90. Default: tries to use the user setting and fallbacks to instance setting if user setting is not found
  91. ### bigPlayBackgroundColor
  92. Customize big play button background color.
  93. Value must be a valid color (`red` or `rgba(100, 100, 100, 0.5)`).
  94. Default: rgba(0, 0, 0, 0.8)
  95. ### foregroundColor
  96. Customize embed font color.
  97. Value must be a valid color (`red` or `rgba(100, 100, 100, 0.5)`).
  98. Default: `white`
  99. ### mode
  100. Force a specific player engine.
  101. Value must be a valid mode (`web-video` or `p2p-media-loader`).
  102. See behaviour description [here](https://docs.joinpeertube.org/admin/configuration#vod-transcoding)
  103. Default: `p2p-media-loader` and fallback to `web-video` mode.
  104. ### api
  105. Enable/Disable embed JavaScript API (see methods below).
  106. Value must be `0` or `1`.
  107. Default: `0`
  108. ### waitPasswordFromEmbedAPI
  109. **PeerTube >= 6.0**
  110. If the video requires a password, PeerTube will wait a password provided by `setVideoPassword` method before loading the video.
  111. Until you provide a password, `player.ready` is not resolved.
  112. Value must be `0` or `1`.
  113. Default: `0`
  114. ## Embed attributes
  115. ### `ready: Promise<void>`
  116. This promise is resolved when the video is loaded an the player is ready.
  117. ## Embed methods
  118. ### `play() : Promise<void>`
  119. Starts playback, or resumes playback if it is paused.
  120. ### `pause() : Promise<void>`
  121. Pauses playback.
  122. ### `seek(positionInSeconds : number)`
  123. Seek to the given position, as specified in seconds into the video.
  124. ### `addEventListener(eventName : string, handler : Function)`
  125. Add a listener for a specific event. See below for the available events.
  126. ### `removeEventListener(eventName : string, handler : Function)`
  127. Remove a listener.
  128. ### `getResolutions() : Promise<PeerTubeResolution[]>`
  129. Get the available resolutions. A `PeerTubeResolution` looks like:
  130. ```json
  131. {
  132. "id": 3,
  133. "label": "720p",
  134. "height": "720",
  135. "active": true
  136. }
  137. ```
  138. `active` is true if the resolution is the currently selected resolution.
  139. ### `setResolution(resolutionId : number): Promise<void>`
  140. Change the current resolution. Pass `-1` for automatic resolution (when available).
  141. Otherwise, `resolutionId` should be the ID of an object returned by `getResolutions()`
  142. ### `getPlaybackRates() : Promise<number[]>`
  143. Get the available playback rates, where `1` represents normal speed, `0.5` is half speed, `2` is double speed, etc.
  144. ### `getPlaybackRate() : Promise<number>`
  145. Get the current playback rate. See `getPlaybackRates()` for more information.
  146. ### `setPlaybackRate(rate: number) : Promise<void>`
  147. Set the current playback rate. The passed rate should be a value as returned by `getPlaybackRates()`.
  148. ### `setVolume(factor: number) : Promise<void>`
  149. Set the playback volume. Value should be between `0` and `1`.
  150. ### `getVolume(): Promise<number>`
  151. Get the playback volume. Returns a value between `0` and `1`.
  152. ### `setCaption(id: string) : Promise<void>`
  153. Update current caption using the caption id.
  154. ### `getCaptions(): Promise<{ id: string, label: string, src: string, mode: 'disabled' | 'showing' }>`
  155. Get video captions.
  156. ### `playNextVideo(): Promise<void>`
  157. Play next video in playlist.
  158. ### `playPreviousVideo(): Promise<void>`
  159. Play previous video in playlist.
  160. ### `getCurrentPosition(): Promise<void>`
  161. Get current position in playlist (starts from 1).
  162. ### `setVideoPassword(): Promise<void>`
  163. **PeerTube >= 6.0**
  164. Set the video password so the user doesn't have to manually fill it.
  165. `waitPasswordFromEmbedAPI=1` is required in embed URL.
  166. ### `getImageDataUrl(): Promise<string>`
  167. **PeerTube >= 6.2**
  168. Get the current frame as JPEG image data URL.
  169. ## Embed events
  170. You can subscribe to events by using `addEventListener()`. See above for details.
  171. ### Event `playbackStatusUpdate`
  172. Fired every half second to provide the current status of playback.
  173. The parameter of the callback will resemble:
  174. ```json
  175. {
  176. "position": 22.3,
  177. "volume": 0.9,
  178. "duration": "171.37499",
  179. "playbackState": "playing"
  180. }
  181. ```
  182. `duration` field and `ended` `playbackState` are available in PeerTube >= 2.2.
  183. The `volume` field contains the volume from `0` (silent) to `1` (full volume).
  184. The `playbackState` can be `unstarted`, `playing`, `paused` or `ended`. More states may be added later.
  185. ### Event `playbackStatusChange`
  186. Fired when playback transitions between states, such as `paused` and `playing`. More states may be added later.
  187. ### Event `resolutionUpdate`
  188. Fired when the available resolutions have changed, or when the currently selected resolution has changed. Listener should call `getResolutions()` to get the updated information.
  189. ### Event `volumeChange`
  190. Fired when the player volume changed.