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 上编辑示例