textTracks (): TextTrackList & {
on: Function
- tracks_: { kind: string, mode: string, language: string }[]
+ tracks_: (TextTrack & { id: string, label: string, src: string })[]
}
audioTracks (): AudioTrackList
src?: string
width?: number
}
+
+export type PeerTubeTextTrack = {
+ id: string
+ label: string
+ src: string
+ mode: 'showing' | 'disabled'
+}
import * as Channel from 'jschannel'
+import { EventHandler, PeerTubeResolution, PeerTubeTextTrack, PlayerEventType } from './definitions'
import { EventRegistrar } from './events'
-import { EventHandler, PlayerEventType, PeerTubeResolution } from './definitions'
const PASSTHROUGH_EVENTS = [
'pause',
return this.sendMessage<void, number>('getVolume')
}
+ /**
+ * Tell the embed to change the current caption
+ * @param value Caption id
+ */
+ async setCaption (value: string) {
+ await this.sendMessage('setCaption', value)
+ }
+
+ /**
+ * Get video captions
+ */
+ async getCaptions (): Promise<PeerTubeTextTrack[]> {
+ return this.sendMessage<void, PeerTubeTextTrack[]>('getCaptions')
+ }
+
/**
* Tell the embed to seek to a specific position (in seconds)
* @param seconds
import './embed.scss'
import * as Channel from 'jschannel'
-import { PeerTubeResolution } from '../player/definitions'
+import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
import { PeerTubeEmbed } from './embed'
/**
channel.bind('setResolution', (txn, resolutionId) => this.setResolution(resolutionId))
channel.bind('getResolutions', (txn, params) => this.resolutions)
+ channel.bind('getCaptions', (txn, params) => this.getCaptions())
+ channel.bind('setCaption', (txn, id) => this.setCaption(id)),
+
channel.bind('setPlaybackRate', (txn, playbackRate) => this.embed.player.playbackRate(playbackRate))
channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
}
+ private getCaptions (): PeerTubeTextTrack[] {
+ return this.embed.player.textTracks().tracks_.map(t => {
+ return {
+ id: t.id,
+ src: t.src,
+ label: t.label,
+ mode: t.mode as any
+ }
+ })
+ }
+
+ private setCaption (id: string) {
+ const tracks = this.embed.player.textTracks().tracks_
+
+ for (const track of tracks) {
+ if (track.id === id) track.mode = 'showing'
+ else track.mode = 'disabled'
+ }
+ }
+
/**
* Let the host know that we're ready to go!
*/
<br/>
</fieldset>
+ <fieldset>
+ <legend>Captions:</legend>
+ <div id="caption-list"></div>
+ <br/>
+ </fieldset>
+
<fieldset>
<legend>Rates:</legend>
<div id="rate-list"></div>
import './test-embed.scss'
import { PeerTubePlayer } from '../player/player'
-import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
+import { PeerTubeResolution, PlayerEventType, PeerTubeTextTrack } from '../player/definitions'
window.addEventListener('load', async () => {
const urlParts = window.location.href.split('/')
updateRates()
})
+ const updateCaptions = async () => {
+ const captions = await player.getCaptions()
+
+ const captionEl = document.querySelector('#caption-list')
+ captionEl.innerHTML = ''
+
+ captions.forEach(c => {
+ console.log(c)
+
+ if (c.mode === 'showing') {
+ const itemEl = document.createElement('strong')
+ itemEl.innerText = `${c.label} (active)`
+ itemEl.style.display = 'block'
+ captionEl.appendChild(itemEl)
+ } else {
+ const itemEl = document.createElement('a')
+ itemEl.href = 'javascript:;'
+ itemEl.innerText = c.label
+ itemEl.addEventListener('click', () => {
+ player.setCaption(c.id)
+ updateCaptions()
+ })
+ itemEl.style.display = 'block'
+ captionEl.appendChild(itemEl)
+ }
+ })
+ }
+
+ updateCaptions()
+
const updateResolutions = ((resolutions: PeerTubeResolution[]) => {
const resolutionListEl = document.querySelector('#resolution-list')
resolutionListEl.innerHTML = ''
## Playground
-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
-allows you to test various aspects of PeerTube embeds. Simply replace `/embed` with `/test-embed` and visit the URL in a browser.
+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
+allows you to test various aspects of PeerTube embeds. Simply replace `/embed` with `/test-embed` and visit the URL in a browser.
For instance, the playground URL for the above embed URL is `https://my-instance.example.com/videos/test-embed/52a10666-3a18-4e73-93da-e8d3c12c305a`.
## Quick Start
Get the current playback rate. See `getPlaybackRates()` for more information.
-## `setPlaybackRate(rate : number) : Promise<void>`
+## `setPlaybackRate(rate: number) : Promise<void>`
Set the current playback rate. The passed rate should be a value as returned by `getPlaybackRates()`.
-## `setVolume(factor : number) : Promise<void>`
+## `setVolume(factor: number) : Promise<void>`
Set the playback volume. Value should be between `0` and `1`.
Get the playback volume. Returns a value between `0` and `1`.
+## `setCaption(id: string) : Promise<void>`
+
+Update current caption using the caption id.
+
+## `getCaptions(): Promise<{ id: string, label: string, src: string, mode: 'disabled' | 'showing' }>`
+
+Get video captions.
+
# Events
You can subscribe to events by using `addEventListener()`. See above for details.
## Event `playbackStatusUpdate`
-Fired every half second to provide the current status of playback.
+Fired every half second to provide the current status of playback.
The parameter of the callback will resemble:
```json
projects / oweals / peertube.git / commitdiff