个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我有一个 amp 故事，我需要从动态生成的 url 创建一个包含全屏视频的页面。在下面的第 2 页中，我直接使用 amp-video 组件呈现全屏，在第 3 页中，我使用 amp-list 提供视频 url，它不会“填充”页面。见 https://codepen.io/svdoever/pen/gKPdjK .要查看 codepen.io 上的示例，首先单击按钮并刷新以启用 amp-story 实验。然后使预览窗口足够大以显示故事。
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<title>My Story</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="amp-list-video-story.html">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
font-family: 'Roboto', sans-serif;
}
amp-story-page {
background: white;
}
h1 {
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
text-transform: uppercase;
}
</style>
</head>
<body>
<amp-story standalone>
<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
<p>This is the cover page of this story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-1">
<amp-story-grid-layer template="vertical">
<h1>Hello Earth</h1>
<p>This is the earth page of this story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-video width="480" height="270"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4"
layout="responsive"
poster="https://dummyimage.com/720x1280/000/fff" controls autoPlay loop>
<div fallback><p>Your browser doesn't support HTML5 video.</p></div>
</amp-video>
</amp-story-grid-layer />
</amp-story-page>
<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
<amp-list layout="fill" width="480" height="270" single-item items="."
src="https://gist.githubusercontent.com/svdoever/9de8228fbea47100cdac3ee636f04d3f/raw/4d2b98691858c2e780a489cb201ac0fe491b24c0/amp-list-video-story.json">
<template type="amp-mustache" id="amp-template-id">
<amp-video width="480" height="270" src="{{url}}" layout="responsive" poster="https://dummyimage.com/720x1280/000/fff" autoPlay>
<div fallback><p>Your browser doesn't support HTML5 video.</p></div>
</amp-video>
</template>
</amp-list>
</amp-story-grid-layer />
</amp-story-page>
</amp-story>
</body>
</html>
最佳答案
目前，“填充”样式(在占据整个视口(viewport)的元素上使用 object-fit: cover 完成)仅适用于 <amp-story-grid-layer> 的直接后代。 ，但您的视频不是直系后代，因为它嵌入在 <amp-list> 中.您可以在 amp-story.css 中看到导致此问题的样式。 .
也就是说，执行多个往返请求以确定要播放的视频(首先获取 JSON，然后获取 poster ，然后获取 src )可能会影响性能，这将使页面显示为空白，直到网络请求完成。
可以使用的另一种方法是在服务器端确定正确的视频 URL，以最大限度地减少用户关键路径中的请求数量。
关于amp-html - amp-story 如何在 amp-list 全屏中获取 mp4 视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50678813/
29
4
0
我想使用 R 预定义这样的列表 DATA<-list( list(list(),list(),list()), list(list(),list(),list()), list(list(),l
如何将一个列表添加到另一个列表，返回一个列表的列表？ foo :: [a] -> [a] -> [[a]] 例如，我想要的结果是: foo [1,2] [3,4] 将是 [[1,2], [3,4]]。
我还没有在这里找到类似问题的解决方案，所以我会寻求你的帮助。 有 2 个列表，其中之一是列表列表: categories = ['APPLE', 'ORANGE', 'BANANA'] test_re
这个问题不同于Converting list of lists / nested lists to list of lists without nesting (这会产生一组非常具体的响应，但无法解决
原始列表转换为 List正好。为什么原始列表的列表不能转换为 List 的列表？ { // works List raw = null; List wild = raw; } {
在下面的代码中，get()被调用并将其结果分配给类型为 List> 的变量. get()返回 List>并在类型参数为 T 的实例上调用设置为 ? ，所以它应该适合。 import java.util
原始列表转换为 List正好。为什么原始列表的列表不能转换为 List 的列表? { // works List raw = null; List wild = raw; } {
在insufficiently-polymorphic 作者说: def foo[A](fst: List[A], snd: List[A]): List[A] There are fewer way
我有下面的代码有效。 class ListManipulate(val list: List, val blockCount: Int) { val result: MutableList>
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 5 年前。 Improve this ques
在 scala (2.9) 中转换列表列表的最佳方法是什么？ 我有一个 list : List[List[A]] 我想转换成 List[A] 如何递归地实现这一点？或者还有其他更好的办法吗？ 最佳答案
我编写了这个函数来确定给定元素是否存储在元组列表的列表中，但目前它只搜索第一个列表。我将如何搜索其余列表？ fun findItem (name : command, ((x,y)::firstlis
我创建了一个类名 objectA，它有 4 个变量:约会时间;字符串文本；变量 1，变量 2 我需要创建一个 ObjectA() 列表。然后首先按时间对它们进行分组，其次按 var1，然后按 var2
我有一套说法 char={'J','A'} 和列表的列表 content = [[1,'J', 2], [2, 'K', 3], [2, 'A', 3], [3,'A', 9], [5, 'J', 9
我有以下列表 List >>> titles = new ArrayList >>> ();我想访问它的元素，但我不知道该怎么做.. 该列表有 1 个元素，它又包含 3 个元素，这 3 个元素中的
转换 List[List[Long]] 的最佳方法是什么？到 List[List[Int]]在斯卡拉？ 例如，给定以下类型列表 List[List[Long]] val l: List[List[Lo
我有一个来自 Filereader (String) 的 List-List，如何将其转换为 List-List (Double):我必须返回一个包含 line-Array 的第一个 Values 的
我收集了List> 。我需要将其转换为List> 。这是我尝试过的， List> dataOne = GetDataOne(); var dataTwo = dataOne.Select(x => x
这个问题在这里已经有了答案: Cannot convert from List to List> (3 个答案) 关闭 7 年前。 我没有得到这段代码以任何方式编译: List a = new Ar
这个问题在这里已经有了答案: Cannot convert from List to List> (3 个答案) 关闭 7 年前。 我没有得到这段代码以任何方式编译: List a = new Ar
我是一名优秀的程序员,十分优秀！