angular 2 推特球员卡

Question

我正在尝试为 Angular 2 项目实施 Twitter 玩家卡片。

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

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

我可以为当前视图动态创建元标记。但是每张球员卡都有放置 audio/video 来源的容器。

此来源与我通过元标记名称发送的来源不兼容="twitter:player:stream"

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

    <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 中不可见（我不能为每个 post 粘贴超过 2 个 url，这就是格式错误的原因）

卡片-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 扑克牌吗？

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

Answer 1

推特开发者提到推特爬虫不执行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]"; ?>"/>

使用 angular 路由器，我从 /audiocontainer/:id 获取 'id' 并在此处执行逻辑。

angular 2 推特球员卡

angular 2 twitter player card

twitter

twitter-card

angular