将 tiktok 视频嵌入 Angular 7 的问题答案

【问题标题】：Problem embedding tiktok video into angular 7将 tiktok 视频嵌入 Angular 7 的问题
【发布时间】：2021-06-03 23:55:20
【问题描述】：

我已将 tiktok 视频嵌入我的网站（在弹出窗口中），但它只是如图所示显示并且无法播放视频。

我使用 angular 7 和 ngx-bootstrap 弹出窗口。

这是我的代码

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hiip Application</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon.ico">
  <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
  <script async src="https://www.tiktok.com/embed.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

*.component.html

<blockquote class="tiktok-embed"
   cite="https://www.tiktok.com/@midu_official/video/6927634419398266113"
   data-video-id="6927634419398266113" style="max-width: 605px;min-width: 325px;">
   <section>
     <a target="_blank" title="@midu_official"href="https://www.tiktok.com/@midu_official">@midu_official</a>
     <p>Anh ơiiiii</p>
     <a target="_blank" title="♬ nhạc nền - ????anhthu???? - ????ngọc ánh????" href="https://www.tiktok.com/music/nhạc-nền-????anhthu????-6915637069796641537">♬ nhạc nền - ????anhthu???? - ????ngọc ánh????</a> </section>
</blockquote>

【问题讨论】：

标签： javascript angular tiktok

【解决方案1】：

似乎在加载 tiktok 脚本之前呈现视图。尝试手动加载脚本，脚本加载后，通过ngIf显示视图。

从 index.html 中删除脚本

<script async src="https://www.tiktok.com/embed.js"></script>

app.component

export class AppComponent {

  showBlock = false;
  constructor( ) {

  this.loadScript('https://www.tiktok.com/embed.js').then(status => {
    if (status === 'loaded') {
      this.showBlock = true;
    }
  })
  }

  loadScript(url) {
    return new Promise((resolve, reject) => {

      if (document.getElementById('tiktok-script')) {
        resolve("loaded");
      }
      const script = document.createElement("script");
      script.async = true;
      script.src = url;
      script.setAttribute('id', 'tiktok-script');

      script.onload = () => {
        // script is loaded successfully, call resolve()
        resolve("loaded");
      };

      script.onerror = () => {
        // script is not loaded, call reject()
        reject("error");
      };

      document.head.appendChild(script);
    });
  }

}

查看

<ng-container *ngIf="showBlock ">
  <blockquote class="tiktok-embed"
              cite="https://www.tiktok.com/@midu_official/video/6927634419398266113"
              data-video-id="6927634419398266113" style="max-width: 605px;min-width: 325px;">
    <section>
      <a target="_blank" title="@midu_official"href="https://www.tiktok.com/@midu_official">@midu_official</a>
      <p>Anh sdf</p>
      <a target="_blank" title="♬ nhạc nền - ?anhthu? - ?ngọc ánh?" href="https://www.tiktok.com/music/nhạc-nền-?anhthu?-6915637069796641537">♬ nhạc nền - ?anhthu? - ?ngọc ánh?</a> </section>
  </blockquote>
</ng-container>

这对我有用 Example

【讨论】：