javascript - 在 React App 中嵌入 TikTok 视频；视频未显示

Question

我目前正在致力于将 tiktok 视频嵌入到 React 应用程序中。 目前，我正在尝试显示 html 代码，可以通过使用 tiktoks api ( 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 才会被实际渲染。为此，我使用了这篇文章中的方法: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)

控制台没有错误。 所以，是的，我实际上期望的是抖音视频是可见的，并且文本具有正确的样式。然而，事实并非如此。

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

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

Answer 1

使用https://www.tiktok.com/embed/{video_id}代替页面网址。您可以通过查看抖音网址的最后一个数字字符串来找到 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>