0

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?

Martin Bean
  • 38,379
  • 25
  • 128
  • 201
  • The following is 'regular' HTML5 related so may not apply to AMP, but in case it is useful. The key part is reloading the video after changing the source: https://stackoverflow.com/a/61507923/334402 – Mick Apr 30 '20 at 10:45

1 Answers1

0

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.

Rohit Ambre
  • 921
  • 1
  • 11
  • 25