在 React App 中嵌入 TikTok 视频；视频不显示

Question

我目前正在将 tiktok 视频嵌入到 react 应用程序中。 目前，我正在尝试显示 html 代码，可以通过使用 iframe 使用 tiktoks api (https://developers.tiktok.com/doc/embed-videos) 获得。 html代码：

<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it????❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"PetsOfTikTok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/PetsOfTikTok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - tiff\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - tiff</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>"

由于最后一部分（异步脚本）在 iframe 中创建错误，我按代码删除了它。相反，我会在组件安装后立即加载它并将其附加到文档的头部。只有当脚本已经加载时，才会真正渲染 iframe。为此，我使用了这篇文章中的方法：Problem embedding tiktok video into angular 7

render(){
        return (
            this.state.embedHtml != null ? 
            <iframe 
                srcDoc = {this.state.embedHtml} 
                sandbox = "allow-forms allow-same-origin allow-scripts allow-top-navigation"
            />:null
        )
    }

但是，我得到的只是这个视觉效果和这些值： TikTokIFrame(Video not showing)

控制台没有错误。 所以，是的，我实际上期望的是 tiktok 视频是可见的，以及具有适当样式的文本。然而，事实并非如此。

我尝试了几种不同的方法。 （从设置各种元素的innerHtml到给定的html，到使用iframe（如上图）。

有人知道为什么视频没有显示吗？

Answer 1

使用https://www.tiktok.com/embed/{video_id} 代替页面网址。您可以通过查看 tiktok url 的最后一个数字字符串找到 video_id。比如这个视频的视频ID

https://www.tiktok.com/@heaven.marshall/video/7072819797184171310

是7072819797184171310

设置你的 iframe 和 iframe 容器的 CSS

const iframe_container = {
                left: 0,
                          width: "100%",
                          height: 500,
                          position: "relative"
                        }

const iframe ={top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      position: "absolute",
      border: 0}

将以下 DOM 元素放置在您的反应页面中的任何位置。

<div className={iframe_container}>
                <iframe
                  src="https://www.tiktok.com/embed/7072819797184171310"
                  className={iframe}
                  allowfullscreen
                  scrolling="no"
                  allow="encrypted-media;"
                ></iframe>
              </div>