网页设计：10个媒体播放器设计的创意代码示例

凭借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的音频播放器，但他的视频播放器也值得一些爱。这里有成绩单，隐藏式字幕，手语（在侧面打开一个单独的视频面板）和描述。这是为您的网站带来无障碍视频所需的一切。

当然，不是每个人都有自己的视频。因此，拥有像优酷哔哩哔哩等频道播放列表这样有吸引力且易于使用的播放器是许多网站的必备选择。同样好的是这个例子有很多自定义选项。

我们最近看到的一个大趋势是视频在向下滚动页面时与用户一起“移动”的能力。Charley Pugmire已经建立了一个很好的例子。这是一个YouTube视频，全屏位于屏幕顶部，然后缩小到滚动侧边栏。

上面的例子涵盖了从简单到涡轮增压的全部范围。但真正突出的一点是能够创建符合您所需风格和功能的媒体播放器。