富媒体通知
简介
媒体通知是用户在移动设备上控制媒体播放的最常用方式之一。 Android 版 Chrome 现在公开了 MediaSessionAPI,允许开发者自定义音频/视频播放时显示的通知外观。
amp-video
、amp-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-audio
和 amp-video
,我们需要提供更多信息以添加到媒体通知中。
通过将每个属性添加到 amp-audio
/ amp-video
元素中来指定 artist
、artwork
、title
和 album
。
开始播放音频/视频,然后注意您的设备或智能手表上的通知如何包含此处指定的所有信息/艺术作品
使用 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
进行视频播放
poster
和 artwork
。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 上编辑示例-
由 @wassgha 撰写