angular 2 twitter player card

I'm trying to implement twitter player card for Angular 2 project.

According to documentation https://dev.twitter.com/cards/types/player

And sample code https://github.com/twitterdev/cards-player-samples

I can dynamically create meta tags for current view. But every player card have container where source of audio/video is placed.

This source isn't compatible with one I send via meta tag name="twitter:player:stream"

my tags are proper (almost same as example below, but with my 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" />

where the player is another Component to update source video from service

<!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>

service is imported and value is visible

but meta tags and source video are not visible in url ( I can't paste more than 2 url per post, thats why it's badly formatted)

cards-dev.twitter.com/validator

except that I got only succes mssages

INFO:  Page fetched successfully
INFO:  17 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

Does anyone have idea how to implement twitter play card using Angular2?

I thought I was close enough, but maybe there is another solution.

Solution

Twitter developers mentioned that twitter crawler do not execute JS, thus I found a workaroud. Using angular2-cli after 'ng build' i replace index.html with index.php where i can take id of the item from url and then in twitter container I perform all logic for player.

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

using angular router i take 'id' from /audiocontainer/:id and do a logic here.