豐富媒體通知
簡介
媒體通知是使用者在行動裝置上控制媒體播放最常見的方式之一。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>
標記
如果您使用的影片播放器 (例如 amp-youtube) 已實作內部的 MediaSessionAPI，那麼您就完成了！播放器會處理通知，並根據伺服器上的資訊新增作品和中繼資料。
對於 amp-audio 和 amp-video，我們需要提供更多資訊以新增至媒體通知。
透過將 artist、artwork、title 和 album 等屬性新增至 amp-audio / amp-video 元素，來指定這些屬性。
開始播放音訊/影片，然後注意您的裝置或智慧型手錶上的通知，其中會包含此處指定的所有資訊/作品
搭配 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 上編輯範例-