0

我目前正在开发一个应用程序，我想添加 google Amp-story 播放器以嵌入视频，但不知何故，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
4

0 回答 0