Skip to content

Commit d721889

Browse files
authored
feat: add tiktok support (#1961)
* feat: add tiktok support fix #1193 * fix: upgrade Vimeo and Twitch with bug fixes
1 parent d72301f commit d721889

File tree

6 files changed

+50
-10
lines changed

6 files changed

+50
-10
lines changed

examples/react/src/App.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,18 @@ const App = () => {
241241
},
242242
spotify: {
243243
preferVideo: true
244+
},
245+
tiktok: {
246+
fullscreen_button: true,
247+
progress_bar: true,
248+
play_button: true,
249+
volume_control: true,
250+
timestamp: false,
251+
music_info: false,
252+
description: false,
253+
rel: false,
254+
native_context_menu: true,
255+
closed_caption: false,
244256
}
245257
}}
246258
onLoadStart={() => console.log('onLoadStart')}
@@ -483,6 +495,13 @@ const App = () => {
483495
{renderLoadButton('https://www.twitch.tv/kronovi', 'Test B')}
484496
</td>
485497
</tr>
498+
<tr>
499+
<th>TikTok</th>
500+
<td>
501+
{renderLoadButton('https://www.tiktok.com/@_luwes/video/7527476667770522893', 'Test A')}
502+
{renderLoadButton('https://www.tiktok.com/@scout2015/video/6718335390845095173', 'Test B')}
503+
</td>
504+
</tr>
486505
<tr>
487506
<th>Custom</th>
488507
<td>

package-lock.json

Lines changed: 15 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@
5656
"deepmerge": "^4.0.0",
5757
"hls-video-element": "^1.5.6",
5858
"spotify-audio-element": "^1.0.2",
59-
"twitch-video-element": "^0.1.1",
60-
"vimeo-video-element": "^1.5.2",
59+
"tiktok-video-element": "^0.1.0",
60+
"twitch-video-element": "^0.1.2",
61+
"vimeo-video-element": "^1.5.3",
6162
"wistia-video-element": "^1.3.3",
6263
"youtube-video-element": "^1.6.1"
6364
},

src/patterns.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const MATCH_URL_WISTIA =
1212
/(?:wistia\.(?:com|net)|wi\.st)\/(?:medias|embed)\/(?:iframe\/)?([^?]+)/;
1313
export const MATCH_URL_SPOTIFY = /open\.spotify\.com\/(\w+)\/(\w+)/i;
1414
export const MATCH_URL_TWITCH = /(?:www\.|go\.)?twitch\.tv\/([a-zA-Z0-9_]+|(videos?\/|\?video=)\d+)($|\?)/;
15+
export const MATCH_URL_TIKTOK = /tiktok\.com\/(?:@[^/]+\/video\/)?(\d+)(?:\/([\w-]+))?/;
1516

1617
const canPlayFile = (url: string, test: (u: string) => boolean) => {
1718
if (Array.isArray(url)) {
@@ -40,4 +41,5 @@ export const canPlay = {
4041
wistia: (url: string) => MATCH_URL_WISTIA.test(url),
4142
spotify: (url: string) => MATCH_URL_SPOTIFY.test(url),
4243
twitch: (url: string) => MATCH_URL_TWITCH.test(url),
44+
tiktok: (url: string) => MATCH_URL_TIKTOK.test(url),
4345
};

src/players.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,15 @@ const Players: PlayerEntry[] = [
8484
() => import(/* webpackChunkName: 'reactPlayerTwitch' */ 'twitch-video-element/react')
8585
) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
8686
},
87+
{
88+
key: 'tiktok',
89+
name: 'TikTok',
90+
canPlay: canPlay.tiktok,
91+
canEnablePIP: () => false,
92+
player: lazy(
93+
() => import(/* webpackChunkName: 'reactPlayerTiktok' */ 'tiktok-video-element/react')
94+
) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
95+
},
8796
{
8897
key: 'html',
8998
name: 'html',

src/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type SpotifyAudioElement from 'spotify-audio-element';
44
import type YouTubeVideoElement from 'youtube-video-element';
55
import type VimeoVideoElement from 'vimeo-video-element';
66
import type TwitchVideoElement from 'twitch-video-element';
7+
import type TikTokVideoElement from 'tiktok-video-element';
78

89
interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
910
height?: number | string | undefined;
@@ -49,6 +50,7 @@ export interface Config {
4950
html?: Record<string, unknown>;
5051
mux?: Record<string, unknown>;
5152
spotify?: SpotifyAudioElement['config'];
53+
tiktok?: TikTokVideoElement['config'];
5254
twitch?: TwitchVideoElement['config'];
5355
vimeo?: VimeoVideoElement['config'];
5456
wistia?: Record<string, unknown>;

0 commit comments

Comments
 (0)