icon_topicsテクニック

webサイトに使用するHTML5プレイヤーの考察

昨今、webサイトを閲覧できるプラットフォームやデバイスは多様化し続けています。
また、回線速度が向上したことにより、気軽にwebサイトに動画を埋め込めるようになったことによるニーズは増えてきていると思います。
そのため、Webサイト上でビデオを表示する様々な条件に対応できる互換性の重要性がこれまで以上に大きくなっています。

この記事ではPC、タブレットPC、スマートフォンに対応した3つのHTML5プレイヤーの、それぞれの特徴をご紹介させていただきたいと思います。


JW Player
スクリーンショット 2014-06-30 16.21.53
HTML5プレイヤーとしてはかなり老舗になってきたプレイヤーです。
アカウントを作成してサインインすることによりオンラインで簡単にコードを作成することが出来、そのコードを自分のサイトに挿入すればプレイヤーが表示されるというサービスもあります。
とりあえず動画を表示したいだけであればかなりオススメです。

DLして自分で設置する「Self-Hosted Player」版も存在します。
こちらはプレイヤーのカスタマイズが可能なのである程度機能を付加することも可能です。
izmakerの視聴プレイヤーもJW Playerを利用しています。
カスタマイズの点で見ますと、老舗なだけ合って情報が豊富なのがとても魅力的です。

無料版だとプレイヤーにロゴマークが表示されますが、年会費を支払うことでロゴを非表示にすることも出来ます。

短所を挙げるならば、デザインが少し古い感じがするといったところでしょうか。
それ以外の部分は不自由なく利用できます。

とりあえず自サイトに動画を埋め込みたいだけの方から、本格的な視聴プレイヤーを短期間で作成したい方まで対応できる汎用性の高いプレイヤーです。

JW Player(ウェブサイト


VIDEO.JS
スクリーンショット 2014-06-30 16.22.19
基本的にはDLして自分で設置するタイプのHTML5プレイヤーですが、プレイヤーのみのembedサービスもあります。
機能はそれほど多くないですが、オープンソースなのでカスタマイズ情報も根気よく探せば見つけられると思います。

このプレイヤーの最大の特徴はそのデザインです。
デフォルトの状態でもかなりシンプルで美しいデザインですが、CSSである程度のデザインを変更することが可能です。
ライブラリ自体のクセも少ないのでJavacriptに明るい方であればほんの少しのカスタマイズで色々出来ると思います。

ビジュアル重視のサイトに動画を挿入したい方にはVIDEO.JSをオススメします。


MediaElement.js
スクリーンショット 2014-06-30 17.31.19
自分でDLして設置するタイプのプレイヤーです。かなり新しいプレイヤーのようで、高度な機能も特にはありません。
動作が非常に軽いのが特徴的です、シンプルイズベスト。

他の2つには無いオーディオのみのプレイヤーもあります、オーディオプレイヤーというのも珍しいですね。

WordPressのプラグインもあります、こちらも軽快に動作します。
各種CMSでも動作するようです、重くなりがちなCMSに実装するのも良いと思います


JW Player(ウェブサイト
VIDEO.JS(ウェブサイト
MediaElement.js(ウェブサイト