angular 2 推特玩家卡答案

【问题标题】：angular 2 twitter player cardangular 2 推特玩家卡
【发布时间】：2017-06-09 07:18:46
【问题描述】：

我正在尝试为 Angular 2 项目实现 twitter 播放器卡。

根据文档https://dev.twitter.com/cards/types/player

以及示例代码https://github.com/twitterdev/cards-player-samples

我可以为当前视图动态创建元标记。但是每个玩家卡都有放置音频/视频源的容器。

此来源与我通过 meta tag name="twitter:player:stream" 发送的来源不兼容

我的标签是正确的（与下面的示例几乎相同，但带有我的网址）

    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <meta name="twitter:card" content="player" />
    <meta name="twitter:site" content="@test" />
    <meta name="twitter:title" content="Sample Player Card" />
    <meta name="twitter:description" content="This is a sample video. When you implement, make sure all links are secure." />
    <meta name="twitter:image" content="https://yoursite.com/example.png" />
    <meta name="twitter:player" content="https://yoursite.com/container.html" />
    <meta name="twitter:player:width" content="480" />
    <meta name="twitter:player:height" content="480" />
    <meta name="twitter:player:stream" content="https://yoursite.com/example.mp4" />
    <meta name="twitter:player:stream:content_type" content="video/mp4" />

播放器是另一个组件从服务更新源视频

<!DOCTYPE html>
<html>
<body>

<style type="text/css">
    video {
        width:100%;
        max-width:600px;
        height:auto;
    }
</style>

<video width="100%" controls>
    <source [src]="externalService.twitterCardVideo" type="video/mp4">
    Your browser does not support video
</video>

</body>
</html>

服务已导入，价值可见

但元标记和源视频在 url 中不可见（我不能在每个帖子中粘贴超过 2 个 url，这就是它格式错误的原因）

cards-dev.twitter.com/validator

除了我只得到了成功的消息

INFO:  Page fetched successfully
INFO:  17 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

有人知道如何使用 Angular2 实现 twitter 游戏卡吗？

我以为我已经足够接近了，但也许还有其他解决方案。

【问题讨论】：

标签： angular twitter twitter-card

【解决方案1】：

Twitter 开发者提到 twitter 爬虫不执行 JS，因此我找到了一个解决方法。在“ng build”之后使用 angular2-cli，我将 index.html 替换为 index.php，在其中我可以从 url 获取项目的 id，然后在 twitter 容器中执行播放器的所有逻辑。

<meta name="twitter:player" content="<?php echo "https://$SERVER[HTTPHOST]"."/audiocontainer"."$SERVER[REQUESTURI]"; ?>"/>

使用角度路由器，我从 /audiocontainer/:id 获取“id”并在此处执行逻辑。

【讨论】：