我嵌入fanctbox的抖音视频消失了

Question

我嵌入 fanctbox 的抖音视频消失了

我需要将不同来源的视频嵌入到 fancybox 中。我正在使用“@fancyapps/ui”：“^5.0.17”。我通过 api 获取视频数据，然后根据获取视频的资源将其插入到 fancybox 中。我添加来自 YouTube、VK 和 TikTok 的视频。 来自 YouTube 和 VK 的视频插入没有问题，但来自 TikTok 的视频虽然插入了，但在打开 fancybox 后立即消失。如浏览器的代码检查器中所示，视频仍在页面上。如果我在 fancybox 中打开此视频，然后重新加载页面，则重新加载后视频不会消失，我可以观看它。或者如果我在fancybox中很快打开这个视频，那么我也可以观看。但在这两种情况下，如果我关闭 fancybox，视频就会消失

这是我从抖音获取数据的代码：

$apiUrl = "https://www.tiktok.com/oembed?url={$link}";

try {
    $response = $client->get($apiUrl);
    $jsonResponse = json_decode($response->getBody(), true);
    
    $html = $jsonResponse['html'];
    $preview = $jsonResponse['thumbnail_url'];
} catch(Exception $exception) {
    $html = false;
    $preview = '';
}

return view('widgets.index_iframe_tik_tok_widget', [
    'html' => $html,
    'masterJob' => $this->config['index'],
    'key' => $this->config['key'],
    'preview' => $preview
]);

$html 包含视频的 iframe(blockquote):

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@world_walkerz/video/7218998983937625349" data-video-id="7218998983937625349" data-embed-from="oembed" style="max-width: 605px;min-width: 325px;" id="v62804243901872250">  </blockquote>
<script async="" src="https://www.tiktok.com/embed.js"></script>

$preview 包含缩略图 url

来自 widgets.index_iframe_tik_tok_widget 的代码：

@if($html)
    <div>

    <span data-thumb="{{ $preview }}" data-fancybox="{{ $index->id }}" data-src="#dialog-content-{{ $index->id }}-{{ $key }}"></span>
        <div style="display: none" id="dialog-content-{{ $index->id }}-{{ $key }}">
            {!! $html !!}
        </div>
    </div>
@endif

为了防止视频显示在 fancibox 打开按钮下，我添加了 style="display: none"。如果删除此属性，则不会发生任何变化。

Answer 1

TikTok 的 JavaScript 的工作原理是盲目删除每个

blockquote.tiktok-embed

元素内的第一个 HTML 元素，并将其替换为嵌入的 iframe。但当任何模式加载时，它会尝试再次执行此操作，并且 now 实际的 iframe 是第一个元素！所以它正在删除自己的嵌入。

每当 TikTok 删除原始占位符时，此代码都会使用 Mutation Observer 不断重新插入虚拟元素。 TikTok 现在对我来说是模态的！

/**
 * TikTok will delete its own iframes if they are rendered for the first time
 * (such as in a modal) after the embed script has loaded. The script blindly
 * deletes the first element in the embed container. Initially this is a
 * placeholder, but after initial load it's the actual iframe.
 *
 * So every time the iframe is rendered, we re-add a dummy element to be deleted
 * in the future.
 */
function patchTikTokBehavior(context = document) {
  const futureTikTokEmbeds = Array.from(context.querySelectorAll('blockquote.tiktok-embed'));

  const mutationObserver = new MutationObserver(
    (entries) => {
      entries.forEach(entry => {
        let currentIframe = entry.target.querySelector('iframe');
        let currentDummy = entry.target.querySelector('.dummy-element');

        if (currentIframe && !currentDummy) {
          const dummyElement = document.createElement('div');
          dummyElement.classList.add('dummy-element');
          entry.target.insertBefore(dummyElement, currentIframe);
        }
      })
    }
  );

  futureTikTokEmbeds.forEach(
    embed => {
      mutationObserver.observe(
        embed,
        {
          childList: true,
        }
      );
    }
  );
}