AMP 中的视频
AMP 中的大多数视频播放器组件都实现了 VideoInterface
API。这意味着在所有这些组件中都提供了一组功能,可以是完整的,也可以是部分的。
本文档描述了这些播放器实现的所有功能(正在进行中,不完整)。
播放器
通用
适用于第三方服务
- amp-3q-player
- amp-brid-player
- amp-brightcove
- amp-dailymotion
- amp-delight-player
- amp-gfycat
- amp-ima-video
- amp-jwplayer
- amp-minute-media-player
- amp-mowplayer
- amp-nexxtv-player
- amp-ooyala-player
- amp-powr-player
- amp-vimeo
- amp-viqeo-player
- amp-wistia-player
- amp-youtube
分析
请参阅视频分析。
自动播放
属性:autoplay
如果存在此属性,并且浏览器支持自动播放
- 视频会在自动播放开始前自动静音
- 当视频滚动出视图时,视频会暂停
- 当视频滚动到视图中时,视频会恢复播放
- 当用户点击视频时,视频会取消静音
- 如果用户与视频进行了交互(例如,静音/取消静音、暂停/恢复等),并且视频滚动进出视图,则视频的状态将保持用户离开时的状态。例如,如果用户暂停了视频,然后将视频滚动出视图并返回到视频,则视频仍会暂停。
有关示例,请访问 AMP 示例。
停靠(最小化到角落)
属性:dock
此属性目前仅支持 amp-brightcove
、amp-dailymotion
、amp-delight-player
、amp-ima-video
、amp-jwplayer
、amp-video
、amp-video-iframe
和 amp-youtube
。
如果存在此属性且视频正在手动播放,则当用户滚动出视频组件的可见区域时,视频将“最小化”并固定到角落。
- 用户可以将视频拖放到不同的角落并重新定位。
- 同一页面上的多个视频可以停靠。
为了使用此属性,必须存在 amp-video-docking
扩展脚本
<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js" ></script>
有关更多详细信息,请参阅 关于停靠扩展本身的文档。
旋转到全屏
属性:rotate-to-fullscreen
此属性目前仅支持 amp-video
、amp-ima-video
和 amp-dailymotion
。
如果存在此属性且视频正在手动播放(即,用户启动了播放,或在自动播放后点击了视频),则当用户将其设备旋转到横向模式时,只要视频可见,视频就会全屏显示。
当多个设置了 rotate-to-fullscreen
属性的视频同时可见时,将采用启发式方法来选择要在全屏中显示的视频。这些启发式方法按以下降序优先级应用
- 如果视频正在手动播放(即,用户启动了播放,或在自动播放后点击了视频)
- 如果视频的可见百分比更高。
- 如果视频更靠近视口的中心。
- 如果其他所有都失败,则选择最靠近视口顶部的视频。