綺麗にスタイリングされたメディアプレーヤーのデモ [Plyr.io]

Plyrというライブラリを利用して、レスポンシブ、アニメーション付きのボタンが付いたメディアプレーヤーを実装したデモンストレーションです。Youtubeの動画埋め込みもスタイリングできます。

ビデオプレーヤー

自前でファイルを用意した、ビデオプレーヤーの場合です。

右記の動画を、サンプルに利用させていただきました。 peach.blender.org.

YoutubeのビデオIDを指定することで、スタイリングされたプレーヤーに、Youtubeのビデオを埋め込むことができます。

サウンドファイルの例です。

右記の音楽を、サンプルに利用させていただきました。Hospital Records.