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

默認(rèn)播放器可能提供基本功能，但它不一定與您的品牌相匹配或提供一些更高級(jí)的功能。因此，設(shè)計(jì)師們已經(jīng)將自己的創(chuàng)意天賦與高端功能相結(jié)合，創(chuàng)造了一些令人難以置信的獨(dú)特媒體播放器。看看下面的一些我們的最愛(ài)，并隨時(shí)嘗試源代碼。

音頻播放器

圓而美

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

 

可拖動(dòng)的播放列表

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

內(nèi)置輔助功能

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

材料設(shè)計(jì)涉及音頻

Michael Zhigulin在這款播放器上使用Material Design非常出色。從流行的“卡片”布局到流暢的動(dòng)畫(huà)，它與Google的標(biāo)準(zhǔn)非常吻合。

旋轉(zhuǎn)一些乙烯基

這里的概念太酷了。Matt Stvartak的演奏者在功能上是基本的，但從袖子中彈出的旋轉(zhuǎn)乙烯基是一個(gè)出色的設(shè)計(jì)。

視頻播放器

順暢和響應(yīng)

HTML5媒體背后的部分理念是確保移動(dòng)設(shè)備能夠訪問(wèn)與桌面相同的內(nèi)容（而不是Flash）。Simon Goellner的視頻播放器輕松處理響應(yīng)性，并且可以使用一些簡(jiǎn)單的CSS來(lái)設(shè)置它的風(fēng)格非常受歡迎。

標(biāo)記控件

Tadaima的HTML5視頻播放器的優(yōu)點(diǎn)在于，當(dāng)用戶將鼠標(biāo)懸停在其上時(shí)，控制欄上的每個(gè)項(xiàng)目都會(huì)顯示文本標(biāo)簽。雖然視頻控制通常很直觀，但添加這種額外的觸摸可以確保每個(gè)人都知道到底發(fā)生了什么。

終極無(wú)障礙

我們上面提到了Joe Watkins的音頻播放器，但他的視頻播放器也值得一些愛(ài)。這里有成績(jī)單，隱藏式字幕，手語(yǔ)（在側(cè)面打開(kāi)一個(gè)單獨(dú)的視頻面板）和描述。這是為您的網(wǎng)站帶來(lái)無(wú)障礙視頻所需的一切。

YouTube播放列表

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

隨你移動(dòng)的視頻

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

媒體事務(wù)

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