AMP
  • 网站

富媒体通知

简介

媒体通知是用户在移动设备上控制媒体播放的最常见方式之一。适用于 Android 的 Chrome 现在公开了 MediaSessionAPI,允许开发者自定义音频/视频播放时出现的通知外观。

amp-videoamp-audio 和其他 AMP 视频播放器现在实现了 MediaSessionAPI,让你可以轻松地为移动设备上的媒体播放显示更好的通知。

由于通知会在设备之间同步,因此只需实现一次 MediaSessionAPI,用户就可以在通知中心、锁定屏幕甚至智能手表上看到有关当前正在播放的媒体文件的更丰富信息,并暂停/播放该文件!

设置

根据你是为 amp-video 实现自定义媒体通知,还是为... 实现自定义媒体通知

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

... amp-audio 或其他视频播放器实现,请导入必要的组件。

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

标记

如果你使用的是已经实现了内部 MediaSessionAPI 的视频播放器(如 amp-youtube),那么你的工作就完成了!播放器将处理通知,并根据其服务器上的信息添加艺术作品和元数据。

对于 amp-audioamp-video,我们需要提供更多信息以添加到媒体通知中。

通过将每个属性添加到 amp-audio / amp-video 元素来指定 artistartworktitlealbum

要尝试这些示例,你必须使用适用于 Android 的 Chrome。

开始播放音频/视频,然后注意你的设备或智能手表上的通知如何具有此处指定的所有信息/艺术作品

使用 amp-audio 进行音频播放

具有媒体通知的示例 amp-audio 组件

<amp-audio src="https://storage.googleapis.com/media-session/sintel/snow-fight.mp3" artwork="https://storage.googleapis.com/media-session/sintel/artwork-512.png" title="Snow Fight" album="Jan Morgenstern" artist="Sintel" height="50" width="auto" controls>
</amp-audio>

这是在移动设备上的外观

使用 amp-video 进行视频播放

在此示例中,我们同时提供了 posterartwork

poster 用作视频加载时向用户显示的占位符,而 artwork 是出现在富媒体通知中的图像(通常是 500 x 500 像素的方形图像)。

<amp-video autoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" artwork="img/bigbuckbunny.jpg" title="Big Buck Bunny" album="Blender" artist="Blender Foundation" width="720" height="405" layout="responsive" controls>
</amp-video>

这是在移动设备上的外观

...以及在 Android 智能手表上的外观

需要进一步解释吗?

如果此页面上的说明没有涵盖你的所有问题,请随时联系其他 AMP 用户,讨论你的确切用例。

转到 Stack Overflow
一个无法解释的功能?

AMP 项目强烈鼓励你的参与和贡献!我们希望你成为我们开源社区的持续参与者,但也欢迎你对你特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例