憑借HTML5的強大功能以及通過WordPress oEmbed等技術輕松添加多媒體，任何人都可以在其網站上添加引人注目的視頻或音頻內容。而且，雖然從純粹的功能角度來看包含默認媒體播放器是很棒的，但是可以做更多的事情來改善用戶體驗。

默認播放器可能提供基本功能，但它不一定與您的品牌相匹配或提供一些更高級的功能。因此，設計師們已經將自己的創意天賦與高端功能相結合，創造了一些令人難以置信的獨特媒體播放器?？纯聪旅娴囊恍┪覀兊淖類?，并隨時嘗試源代碼。

音頻播放器

圓而美

這款來自Sebastian Beltz的圓形音頻播放器讓標準媒體播放器的直邊變得羞愧。它看起來非常漂亮，直觀，并且包含共享/收藏按鈕使其成為更完整的UI。

 

可拖動的播放列表

您可以在屏幕上拖動此音頻播放器這一事實很酷。但更好的是Antoinette Janus創建的簡單而智能的UI。滾動播放列表并播放所選曲目快速而輕松。

內置輔助功能

事實上，這是一個簡單的玩家。但Joe Watkins在可訪問性方面添加了一個非常好的替代UI。用于播放和暫停的基于文本的按鈕確保任何人都可以使用媒體。查看成績單的能力非常棒。

材料設計涉及音頻

Michael Zhigulin在這款播放器上使用Material Design非常出色。從流行的“卡片”布局到流暢的動畫，它與Google的標準非常吻合。

旋轉一些乙烯基

這里的概念太酷了。Matt Stvartak的演奏者在功能上是基本的，但從袖子中彈出的旋轉乙烯基是一個出色的設計。

視頻播放器

順暢和響應

HTML5媒體背后的部分理念是確保移動設備能夠訪問與桌面相同的內容（而不是Flash）。Simon Goellner的視頻播放器輕松處理響應性，并且可以使用一些簡單的CSS來設置它的風格非常受歡迎。

標記控件

Tadaima的HTML5視頻播放器的優點在于，當用戶將鼠標懸停在其上時，控制欄上的每個項目都會顯示文本標簽。雖然視頻控制通常很直觀，但添加這種額外的觸摸可以確保每個人都知道到底發生了什么。

終極無障礙

我們上面提到了Joe Watkins的音頻播放器，但他的視頻播放器也值得一些愛。這里有成績單，隱藏式字幕，手語（在側面打開一個單獨的視頻面板）和描述。這是為您的網站帶來無障礙視頻所需的一切。

YouTube播放列表

當然，不是每個人都有自己的視頻。因此，擁有像優酷嗶哩嗶哩等頻道播放列表這樣有吸引力且易于使用的播放器是許多網站的必備選擇。同樣好的是這個例子有很多自定義選項。

隨你移動的視頻

我們最近看到的一個大趨勢是視頻在向下滾動頁面時與用戶一起“移動”的能力。Charley Pugmire已經建立了一個很好的例子。這是一個YouTube視頻，全屏位于屏幕頂部，然后縮小到滾動側邊欄。

媒體事務

上面的例子涵蓋了從簡單到渦輪增壓的全部范圍。但真正突出的一點是能夠創建符合您所需風格和功能的媒體播放器。