Какой лучший способ встраивания видео с помощью проигрывателя 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