0

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

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

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

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

此来源与我通过元标记 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，这就是它格式错误的原因）

卡-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 游戏卡？

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

4

1 回答 1

0

推特开发者提到推特爬虫不执行 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”并在此处执行逻辑。

于 2017-01-26T14:30:29.407 回答