将 tiktok 视频嵌入 angular 时出现问题 7

Question

我已经在我的网站中嵌入了 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>

Answer 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

将 tiktok 视频嵌入 angular 时出现问题 7

Problem embedding tiktok video into angular 7

javascript

angular

tiktok