TikTok嵌入式视频不断消失

我正在尝试将 TikTok 视频嵌入到我的网页中,但是当页面加载时,我会看到视频布局一秒钟,然后它就消失了。这是从 TikTok 网站复制和粘贴的代码:

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@60secofserenity/video/6871965847380839686" data-video-id="6871965847380839686" style="max-width: 605px;min-width: 325px;">
    <section>
        <a target="_blank" title="@60secofserenity" href="https://www.tiktok.com/@60secofserenity">@60secofserenity</a>
        <p>
            <a title="duet" target="_blank" href="https://www.tiktok.com/tag/duet">##duet</a> with @dr.kyleross
            <a title="comedy" target="_blank" href="https://www.tiktok.com/tag/comedy">##comedy</a>
            <a title="fyp" target="_blank" href="https://www.tiktok.com/tag/fyp">##fyp</a>
            <a title="foryou" target="_blank" href="https://www.tiktok.com/tag/foryou">##Foryou</a>
        </p>
        <a target="_blank" title="♬ original sound - Dr. Kyle Ross" href="https://www.tiktok.com/music/original-sound-6863810291730303750">♬ original sound - Dr. Kyle Ross</a>
    </section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

在控制台上,我收到此错误:

资源解释为文档,但使用 MIME 类型 application/json 传输:“https://www.tiktok.com/embed/v2/6871965847380839686?lang=en-US”。

我不确定如何处理此错误。感谢您的任何建议,并提前感谢您的任何提示!

stack overflow TikTok embedded video keeps disappearing
原文答案

答案:

作者头像

我有一个非常相似的问题。关于这个问题有两件重要的事情。

首先,我相信TikTok最近遇到了一些问题。然而,这只是我的猜测。除了我的代码之外,我一直在尝试使用来自 GitHub 的第三方项目,并且嵌入代码在我的 Chrome、Firefox 和 Safari 上都无法与其中任何一个项目一起使用。发生的事情看起来与您描述的完全一样 - 布局出现,然后在几秒钟后消失。现在,无需对代码进行任何更改,我就不再有这个问题了。我认为写下来很重要,以防其他人将来发生类似的事情。

其次,如果您将嵌入代码用作更大项目的一部分,您可以添加 TikTok 嵌入代码,例如帖子,或者,例如,它们是 React 组件的一部分,请记住在添加块引用部分后运行 TikTok 脚本,如 {JXM =} 对于 Instagram 的情况。否则将加载的只是 TikTok 视频布局。

作者头像

我们遇到了同样的问题,并通过从 .htaccess 中删除以下内容来“修复”它。

Header set Referrer-Policy same-origin

该安全标头会阻止 tiktok iframe 正确加载。如果我找到更多信息,我会在这里更新。

作者头像

答复建议“在添加blockquote零件之后,在Instagram案例中添加blockquote零件后运行tiktok脚本”。但是,如果有多个tiktok视频,这将加载多个tiktok脚本的副本?如果是,那么如何避免它?