• 網站

多媒體訊息通知

簡介

媒體訊息通知是使用者在行動裝置上控制媒體播放最常見的方式之一。Android 版 Chrome 現在公開 MediaSession API，讓開發人員可以自訂音訊/影片播放時顯示的通知外觀。

amp-video、amp-audio 和其他 AMP 影片播放器現在都導入了 MediaSession API，讓您可以輕鬆地為行動裝置上的媒體播放顯示更完善的通知。

由於通知會在裝置之間同步處理，因此只要導入一次 MediaSession API，使用者就能從通知中心、鎖定畫面甚至是智慧型手錶上，看到目前播放的媒體檔案更豐富的資訊，以及暫停/播放媒體檔案！

設定

取決於您是要為 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>

標記

如果您使用的是已導入內部 MediaSession API 的影片播放器 (例如 amp-youtube)，那就完成了！播放器會處理通知，並根據伺服器上的資訊新增 artwork 和中繼資料。

對於 amp-audio 和 amp-video，我們需要提供更多資訊，以便新增至媒體訊息通知。

將 artist、artwork、title 和 album 屬性新增至 amp-audio/amp-video 元素，即可指定這些資訊。

開始播放音訊/影片，然後注意您的裝置或智慧型手錶上的通知，是否包含此處指定的所有資訊/artwork

搭配 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 則是顯示在多媒體訊息通知中的圖片 (通常是 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 智慧型手錶上的外觀

• 作者： @wassgha