网页嵌入tiktok

2,135 阅读1分钟

前期调研:

面向开发者文档:developers.tiktok.com/doc/embed-v…

具体思路

  1. 用户填入链接,根据链接获取videoID, 比如:www.tiktok.com/@imvincentg… ,获取videoID为7226100604886617387
  2. 如果需要封面图,需要调用接口获取封面图信息thumbnail_url,比如调用
https://www.tiktok.com/oembed?url=https://www.tiktok.com/@scout2015/video/6718335390845095173
  1. 嵌入iframe,src为www.tiktok.com/embed/v3/${…
  2. 如果需要做个按钮控制初始的播放状态,在src后面拼接autoplay,更改autoplay即可,0为不自动播放,1为自动播放

一些记录

匹配用户输入的链接是否为tiktok地址链接格式,并且返回videoID

const getTikTokId = url => {
  // https://www.tiktok.com/@torivofficial/video/7221028761779686699
  const regExp = /^https?:\/\/(?:www\.)?tiktok\.com\/(?:@\w+\/)?video\/[0-9]+$/;
  return regExp.test(url) && url.replace(/^((.+\/)?)(\d+)\/?$/, '$3');
}