如何解决将 tiktok 视频嵌入 angular 7 的问题
我已将 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>
解决方法
似乎在加载 tiktok 脚本之前呈现视图。尝试手动加载脚本，脚本加载后，通过 ngIf 显示视图。
从 index.html 中删除脚本
<script async src="https://www.tiktok.com/embed.js"></script>
应用程序组件
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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
