在React应用程序中嵌入TikTok视频；未显示视频

Question

我目前正致力于将tiktok视频嵌入到一个react应用程序中。目前，我正在尝试显示html代码，人们可以通过使用tiktoks (https://developers.tiktok.com/doc/embed-videos)，通过使用iframe。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才会实际呈现。为此，我使用了本文中的方法：将tiktok视频嵌入角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(视频不显示)

控制台中没有错误。所以是的，我实际上期望的是tiktok视频是可见的，以及文本有适当的风格。然而，情况并非如此。

我在尝试几种不同的方法。(从将各种元素的innerHtml设置为给定的html，到使用iframe (如上文所示))。

有人知道为什么这段视频没有播放吗？

Answer 1

使用https://www.tiktok.com/embed/{video_id}而不是页面URL。您可以通过查看tiktok的最后一个数字字符串来找到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元素放置在您的react页面的任何位置。

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