-
Notifications
You must be signed in to change notification settings - Fork 62
/
App.tsx
60 lines (56 loc) · 1.44 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { PlayerConfig, SourceConfig } from 'bitmovin-player';
import { BitmovinPlayer } from 'bitmovin-player-react';
import { ControlBar, PlaybackToggleOverlay, SeekBar, UIContainer, UIVariant } from 'bitmovin-player-ui';
import { Fragment } from 'react';
const defaultPlayerSource: SourceConfig = {
hls: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8',
};
const playerConfig: PlayerConfig = {
key: '<playerKey>',
playback: {
muted: true,
autoplay: true,
},
};
// Ensure this function returns a new instance of the `UIVariant[]` on every call.
const uiVariantsFactory = (): UIVariant[] => [
{
ui: new UIContainer({
components: [
new PlaybackToggleOverlay(),
new ControlBar({
components: [new SeekBar()],
hidden: false,
}),
],
}),
condition: context => context.isFullscreen,
},
{
ui: new UIContainer({
components: [new PlaybackToggleOverlay()],
}),
condition: context => !context.isFullscreen,
},
];
export function App() {
return (
<Fragment>
<h1>Bitmovin Player React Sample</h1>
<div
style={{
position: 'relative',
maxWidth: '800px',
}}
>
<BitmovinPlayer
source={defaultPlayerSource}
config={playerConfig}
customUi={{
variantsFactory: uiVariantsFactory,
}}
/>
</div>
</Fragment>
);
}