将 tiktok 视频嵌入 Angular 7 的问题
Posted
技术标签:
【中文标题】将 tiktok 视频嵌入 Angular 7 的问题【英文标题】：Problem embedding tiktok video into 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>
【问题讨论】：
【参考方案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 的问题的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Web Video Kit API 将视频发布到 Tiktok