富媒体通知
简介
媒体通知是用户在移动设备上控制媒体播放的最常见方式之一。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
是出现在富媒体通知中的图像(通常是 500x500 像素的方形图像)。
<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