Question

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

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

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

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

此来源与我通过元标记名称=“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>

导入服务且值可见

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

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

我认为我足够接近，但也许有另一种解决方案。

Answer 1

Twitter开发人员提到twitter爬虫不会执行JS 我发现了一个workaroud。在构建之后使用angular2-cli＆＃39;我将index.html替换为index.php，其中我可以从url获取项目的id，然后在twitter容器中执行播放器的所有逻辑。

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

使用角度路由器我采取了＃id;＆＃39;来自/ audiocontainer /：id并在这里做一个逻辑。

angular 2 twitter玩家卡

1 个答案: