angular 2 карточка игрока twitter

Я пытаюсь реализовать карту игрока Twitter для проекта Angular 2.

Согласно документации https://dev.twitter.com/cards/types/player

И пример кода https://github.com/twitterdev/cards-player-samples

Я могу динамически создавать метатеги для текущего представления. Но у каждой карты игрока есть контейнер, в который помещается источник аудио / видео.

Этот источник несовместим с тем, который я отправляю через метатег name = "twitter: player: stream"

мои теги правильные (почти такие же, как в примере ниже, но с моими URL-адресами)

    <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

Кто-нибудь знает, как реализовать игровую карту twitter с помощью Angular2?

Я думал, что был достаточно близок, но, возможно, есть другое решение.


angular twitter twitter-card
person Kordi    schedule 24.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Разработчики Twitter упомянули, что краулер Twitter не выполняет JS, поэтому я нашел обходной путь. Используя angular2-cli после 'ng build', я заменяю index.html на index.php, где я могу взять идентификатор элемента из URL-адреса, а затем в контейнере twitter я выполняю всю логику для игрока.

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

используя угловой маршрутизатор, я беру 'id' из / audiocontainer /: id и делаю здесь логику.

person Kordi    schedule 26.01.2017