0

我目前正在将 tiktok 视频嵌入到反应应用程序中。目前，我正在尝试显示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（视频未显示）

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

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

有谁知道，为什么视频没有显示？

4

0 回答 0