Какой лучший способ встраивания видео с помощью проигрывателя Google amp-story в django

В настоящее время я работаю над приложением, в которое хочу добавить google Amp-story player для вставки видео, но почему-то google amp play не отображает видео или изображения из базы данных, но когда я передаю ссылку на источник видео, который не из моей базы данных, он работает. Я пытался написать пользовательский тег шаблона и фильтр для работы с изображениями, но все еще не могу заставить его работать. Есть ли возможный способ решить эту проблему? 


{% load ampimage_tag %}
<head>
    <script
      async
      src="https://cdn.ampproject.org/amp-story-player-v0.js"
      onload="initializePlayer()"
    ></script>
    <link
      href="https://cdn.ampproject.org/amp-story-player-v0.css"
      rel="stylesheet"
      type="text/css"
    />
    <script>
      // JS
      let player;
  
      function events() {
        console.log(
          "iframes",
          document
            .querySelector("amp-story-player")
            .shadowRoot.querySelectorAll("iframe")
        );
  
        player.addEventListener("storyEnd", (data) =>
          console.log("storyEnd", data)
        );
  
        player.addEventListener("amp-story-player-close", () => {
          console.log("Close button clicked");
        });
      }
  
      function initializePlayer() {
        player = window.document.querySelector("amp-story-player");
        if (player.isReady) {
          // Player loaded. Run e.g. animation.
          console.log("isready");
          events();
          return;
        }
  
        player.addEventListener("ready", () => {
          // Player loaded. Run e.g. animation.
          console.log("ready");
          events();
        });
      }
  
      function show(story) {
        player.show(story);
      }
  
      function nextStory() {
        player.go(1);
      }
    </script>
  </head>
  <body>
   
    <button
      onclick="console.log(
          'iframes',
          document.querySelectorAll('amp-story-player iframe')
        );"
    >
      add story
    </button>
  
    <button
      onclick="show('https://merci-handy.my.join-stories.com/collection-la-bouche-avis-kQoT9uov/',false)"
    >
      First story
    </button>
    <button
      onclick="show('https://webstoriesinteractivity-beta.web.app/arts-quizzes.html',false)"
    >
      Second story
    </button>
    <button onclick="show('e.com/third')">Third story</button>
  
    <amp-story-player
      style="width: 100%; height: 500px;"
      onTouchStart_="console.log('touchStart')"
      exit-control="close-button">
       <a href="https://merci-handy.my.join-stories.com/collection-la-bouche-avis-kQoT9uov/">
    </a>
  
     <a href="https://webstoriesinteractivity-beta.web.app/arts-quizzes.html" ></a>
    
    </amp-story-player>
   
  </body>

Когда я пытаюсь загрузить изображения из базы данных с помощью этого кода, это не работает.

 <amp-story-player
      style="width: 100%; height: 500px;"
      onTouchStart_="console.log('touchStart')"
      exit-control="close-button">
      <amp-img src="{{ object.image.url|ampimg }}">
  </amp-img>
    <amp-video>          
    <source src="{% static 'object.video.url' %}" type="video/mp4">
   </amp-video>

    </amp-story-player>

мой пользовательский тег шаблона .

@register.filter(name ="ampimg")
def ampimg(content):
    img_pattern = r'(<img [^>]+>)'
    img_tags = re.findall(img_pattern, content)
    img_src_pattern = r'src ="([^"]+)"'
    for img in img_tags:
        try:
            img_src = re.findall(img_src_pattern, img)[0]
        except Exception as NoImgSrc:
            img_src = None
        if img_src:
            amp_img = "<amp-img class =\"storyimages\" src =\"{0}\" width =\"360\" height =\"320\" layout =\"responsive\" alt =\"storyimage\">".format(img_src)
            content = content.replace(img, amp_img)
    return content
Вернуться на верх