无法呈现动态amp-youtube

Question

我正在尝试使用amp-state和amp-youtube标签。我不能从服务器动态渲染amp-youtube，下面是示例：

<amp-state id="youtube" [src]="'/get-youtube-id?query=hello">
    <script type="application/json">{"id":"VWGBOGcrj4s"}</script>
</amp-state>
<amp-youtube [data-videoid]="youtube.id" layout="fixed-height" height="309"></amp-youtube>

默认情况下，我将{"id":""}设置为amp-state，在任何情况下，data-videoid都不会渲染视频，只有当我直接输入视频id时，它才会起作用。

Answer 1

amp状态默认状态值未针对初始呈现页面加载进行绑定或设置。要设置状态，您需要使用button on tap执行操作。

你可以通过使用amp-list、amp-mustache和amp-youtube来实现你的目标。

通过带有amp列表的动态视频id嵌入YouTube视频

 <amp-list layout="fixed-height"
  height="100"
  src="https://jsonblob.com/api/jsonBlob/fd104d06-bcbf-11e9-b7d1-730cecdc4eb1"
  binding="no">         
  <template type="amp-mustache">
    <div>
        <amp-youtube width="480"
                   height="270"
                   layout="responsive"
                   data-videoid="{{videoid}}">
       </amp-youtube>
  </div>
  </template>
</amp-list>

注意：src="https://jsonblob.com/api/jsonBlob/fd104d06-bcbf-11e9-b7d1-730cecdc4eb1“应该是返回的视频类，就像

{
  "items": [
    {
      "videoid": "lBTCB7yLs8Y"
    }
  ]
}

在您的例子中: src="'/get-youtube-id?query=hello“应该是

{
  "items": [
    {
      "videoid": "VWGBOGcrj4s"
    }
  ]
}

示例：Click Here