问题标签 [amp-story]

以下是 amp-video 标签的 amp 文档中建议的两个代码片段。在大多数情况下，哪种实现会产生更快、更可靠的结果？这两个片段在性能和用户体验方面有什么区别？

第一个代码用 template="fill" 和 layout="fill" 截断 - https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story.md#children

第二个带有 template="fill" 和 layout="responsive" 的代码片段 - https://www.ampproject.org/docs/reference/components/amp-video

是否有关于 amp-video-container 的详细文档？我试图了解如何在 amp-story 中使用 amp-video-container 以确保我的视频不会被截断并且可以完整观看。

https://ampbyexample.com/advanced/video_carousels_with_amp-carousel/

另外，使用 amp-video-container 时是否需要包含此脚本标签？

<div>在以下场景中，标签如何与 amp-story 交互？哪些场景根据 amp-story 应该在快速加载、没有 AMP 错误等情况下工作的方式工作，为什么？

场景 1：amp-story 之外的 div 标签

场景 2：amp-story-page 中的 div 标签

场景 3：amp-story-grid-layer 中的 div 标签

参考 https://xbyexample.appspot.com/advanced/video_carousels_with_amp-carousel/

• 如何在 amp-story 中进行搜索？
• 将搜索集成到 amp-story 中有哪些不同的选项？
• 每个选项的优缺点是什么？

参考

• https://www.ampproject.org/stories
• https://ampbyexample.com/stories/introduction/amp_story_hello_world/
• https://ampbyexample.com/stories/#stories/features

参考 https://www.w3schools.com/tags/tag_video.asp

该<video>标记还支持 HTML 中的全局属性。amp-story 中的 amp-video 是否支持 HTML 中的全局属性？

全局属性

• accesskey 指定激活/聚焦元素的快捷键
• class 为元素指定一个或多个类名（指样式表中的类）
• contenteditable 指定元素的内容是否可编辑
• data-* 用于存储页面或应用程序私有的自定义数据
• dir 指定元素中内容的文本方向
• draggable 指定元素是否可拖动
• dropzone 指定拖放时是否复制、移动或链接拖动的数据
• hidden 指定一个元素尚不相关或不再相关
• id 为元素指定唯一的 id
• lang 指定元素内容的语言
• spellcheck 指定是否检查元素的拼写和语法
• style 为元素指定内联 CSS 样式
• tabindex 指定元素的跳格顺序
• 标题指定有关元素的额外信息
• translate 指定元素的内容是否应该被翻译

是否有一个地方可以查看 amp-story 的所有事件、筹备中的事件以及永远不会上线的事件？

示例主题

• 剪贴板事件
• 拖动事件
• 鼠标事件
• 键盘事件
• 窗口事件属性
• 形成事件
• 媒体活动
• 杂项事件，例如 onggle，当用户打开或关闭元素时在 HTML5 中触发

在 AMP Start 模板中运行的代码是否也可以在 amp-story 中开箱即用？哪些改变是必要的？

例如，在 Adventures 中使用的这个搜索表单（一个 AMP Start 模板）是否可以在 amp-story 中使用？如果不是，为什么不呢？

AMP Start - 使用我们的模板和组件构建响应迅速、速度极快的 AMP 页面

https://www.ampstart.com/templates

amp-story 能否与 Normalize.css 和 Basscss 完全兼容？我问是因为 AMP Start 是建立在这两个现有的开源项目之上的：

https://www.ampstart.com/howitworks

规范化.css

Normalize.css 使浏览器更一致地呈现所有元素并符合现代标准。它仅针对需要规范化的样式。这为跨设备的 AMP Start 定义清晰一致的样式提供了一个全新的条件。

低音炮

AMP start 是使用低级 CSS 工具包 Basscss 构建的。Basscss 是一个非常轻量级的工具包，它提供了许多 CSS 实用程序类来帮助我们完成布局、响应式网格等操作，而无需编写任何自定义 css。

Basscss 开箱即用，精益求精，反应灵敏，这对 AMP Start 很重要。我们使用 Basscss 作为基础（无插件），但我们从 CSS 规则中删除了任何“！important”实例，因为“！important”与 AMP 不兼容。通过使用现有的 Basscss 类，我们能够编写更少的 CSS，并且仍然可以制作漂亮的页面，即使有 AMP 的 50Kb CSS 限制。

在这两个项目提供的基础之上，我们在 CSS 中添加了一组更自以为是的样式，以便组件和模板继承 AMP Start 的一致外观。

总而言之，CSS 占 AMP 中 50kB 配额的一半不到，因此您应该有足够的空间使用 Basscss 和 AMP Start 类自定义您的页面。

例如，HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。

事件通常与函数结合使用，在事件发生之前（如用户点击按钮），函数不会被执行。

好处

尽管缺乏良好的文档，但是对于 JavaScript 编码人员来说，将带参数的函数（即 Function_Name(Parameter)）添加到 JavaScript 的标准“On”事件之一（即“OnClick”或“onKeyDown”）相对简单。高级程序员可能将此称为动态运行时事件分配，其中函数使用传递的参数。

假设我们在网页上有一个文本区域字段，并且我们希望每次他们在该字段内击键时执行一些功能。在我们的真实示例中，我们想计算字符数，这样我们就可以让用户知道他们离限制有多近，并在超过限制时警告他们。要捕获击键，我们需要挂钩 JavaScript 的“onKeyUp”和“onKeyDown”事件。

有经验的 JavaScript 开发人员知道，添加这些钩子的最简单方法是将它们包含在 textarea 的 HTML 中，如下所示：

https://www.oreilly.com/library/view/amp-building-accelerated/9781786467317/d236e811-756a-4ffb-8f8b-712a34b8f751.xhtml

到目前为止，我们看到的唯一事件是点击，我们看到的唯一操作是打开、关闭和关闭。您可能会对其他可用的内容感到好奇。虽然点击适用于所有元素，但 AMP 中的大多数事件都特定于特定元素。例如，表单有 submit、submit-success 和 submit-error 事件，输入元素有一个 change 事件，而 amp-selector 有一个 select 事件，仅举几例。还有更多；有关 AMP 事件和操作的完整列表，请参阅附录 B，操作和事件。

事件对象

当 HTML 中发生事件时，该事件属于某个事件对象，就像鼠标点击事件属于 MouseEvent 对象一样。

事件对象

所有的事件对象都基于事件对象，并继承了它的所有属性和方法

公共事件对象

• AnimationEvent 用于 CSS 动画
• ClipboardEvent 用于修改剪贴板
• DragEvent 用于拖放交互
• FocusEvent 用于焦点相关的事件
• HashChangeEvent 用于 URL 锚点部分的变化
• InputEvent 用于用户输入
• KeyboardEvent 用于键盘交互
• MouseEvent 用于鼠标交互
• PageTransitionEvent 用于导航到和离开网页
• PopStateEvent 用于历史条目的变化
• ProgressEvent 用于加载外部资源的进度
• StorageEvent 用于窗口存储区域的更改。
• TouchEvent 用于触摸交互
• 用于 CSS 过渡的 TransitionEvent
• UiEvent 用于用户界面交互
• WheelEvent 用于鼠标滚轮交互