如何在 AMP 页面中为视频使用动态源？

Question

I'm creating an AMP version of video pages on my VOD website. I'm using amp-access to authenticate the user, and then amp-subscriptions to check if a user has purchased access to the video. This works fine. However, what I am having difficulty with is, how to dynamically set the source elements for the video itself.

As these videos are premium videos, I don't want the source URLs in the mark-up on page load. What I would like to happen is: if a user has purchased access, to dynamically add <source> child elements to my amp-video tag.

I've tried using amp-list and fetching the source URLs like this:

<amp-list layout="nodisplay" src="/amp/encodings.json">
    <template type="amp-mustache">
        <source src="{{url}}" />
    </template>
</amp-list>

But this seems to throw the following error in the browser console:

AMP validation had errors: http://example.com/video.amp.html:295:48 The parent tag of tag 'picture > source' is 'template', but it can only be 'picture'. (see https://amp.dev/documentation/components/amp-img )

So now I'm at a loss.

Does any one have any ideas how I could dynamically set the source URLs for a video after authorisation?

Answer 1

I am not sure exactly what you looking for but i can suggest you to use amp-iframe here. You can load your video content over separate page and load it though amp-iframe over web page.

By this approach you can add all your related scripts/styles inside iframe loaded page without any restrictions.