我正在尝试实现twitter卡的角2项目。
根据文件https://dev.twitter.com/cards/types/player
和示例代码https://github.com/twitterdev/cards-player-samples
我可以动态地为当前视图创建元标记。但是每一张游戏卡都有放置音频/视频源的容器。
此源与我通过meta标记name=发送的“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中是不可见的(我不能在每个帖子中粘贴超过2个url,这就是为什么它的格式很差)
卡-dev.twitter.com/验证器
但我只得到了成功
INFO: Page fetched successfully
INFO: 17 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully有没有人知道如何使用Angular2实现twitter玩牌?
我以为我离得够近了,但也许还有别的解决办法。
发布于 2017-01-26 14:30:29
Twitter开发人员提到twitter爬虫不执行JS,因此我找到了一个工作方法。使用angular2-cli,在“ng构建”之后,我将index.html替换为index.php,在那里我可以从url获取项目的id,然后在twitter容器中执行播放器的所有逻辑。
<meta name="twitter:player" content="<?php echo "https://$SERVER[HTTPHOST]"."/audiocontainer"."$SERVER[REQUESTURI]"; ?>"/>使用角度路由器,我从/音频容器/:id获取'id‘,并在这里执行一个逻辑。
https://stackoverflow.com/questions/41829082
复制相似问题