多媒體訊息通知
簡介
媒體訊息通知是使用者在行動裝置上控制媒體播放最常見的方式之一。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)，那就完成了！播放器會處理通知，並根據伺服器上的資訊新增 artwork 和 metadata。
對於 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。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 上編輯範例-