HTML5で動く10の動画プレイヤー

公開日:2012/10/30

最終更新日:2012/10/30

ブログ

SEOにもHTML5が重要などといわれる時代になってきましたが、HTML5といえばプラグインなしでデバイスとらわれず動画やアニメーションが再生できるのが大きな魅力ですよね。HTML5の動画プレイヤーは既に多数リリースされていますが、今回はその中から実際に使えるものを10厳選して紹介した記事をspyrestudiosから。 — SEO Japan

動画プレイヤーにはあまりに多くの選択肢があるため、どのアプリケーションが自分に最も相応しいのか選択するのは難しい。私なら、物事を複雑化しないことと、動画プレイヤーの更新、新機能、バグ修正という将来の頭痛の種を避けることをお勧めする。その全てに対処し、あなたの仕事を簡単にするオンラインベースの動画プレイヤーにこだわるのだ。物事を行うことや物事を複雑化しないことのより簡単な方法に関心があるなら、www.wix.comもチェックするといいかもしれない。

Wixは、簡単なドロップ&ドラッグオンラインシステムで、2012年3月26日に無料HTMLウェブサイトビルダーを発表している。Wixはすでに、ユーザーが簡単に複雑でパワフルで見事なウェブサイトを構築することを可能にするドラッグ&ドロップFlashウェブサイトビルダーで幅広い人気を集めてきた。あなたが、フルスクリーン背景でウェブサイトを組み立てる簡単な方法を探しているにしろ、 オンラインで自分のポートフォリオを表示する簡単な方法を探しているにしろ、間違いなくWixをチェックする価値はある。あなたが熟練したウェブデベロッパーであろうと、意欲的な何でも自分でやる人であろうと関係なく、無料HTMLウェブサイトやSEOフレンドリーなFlashウェブサイトを作ることはこれ以上には簡単にならない。

HTML 5の最もエキサイティングな新機能の1つは、新しく導入された<video>要素を使って音声と動画を扱う能力だ。この新しいHTML要素は、デベロッパーが最小限のコードでサイト内に動画を埋め込むことを可能にする。以前は、FlashもしくはJavaベースのプレイヤーが必要とされ、それらは共に、動画を適切に再生させるためにサードパーティプラグインのようなものを視聴者が用意することを要求する。そして、Flashへの愛がないAppleの問題もあった。つまり、もしもあなたがFlash動画をサイト内に使用していて誰かがそれをAppleのモバイルデバイスから見た場合、その動画は再生されないのだ。

何人かのデベロッパーはすでにHTML5動画プレイヤーを使用していて、それには正当な理由がある。私は最近、クライアントに、動画プレイヤーをFlashベースのプレイヤーからHTML5プレイヤーに変えるようにリクエストをした。その結果が、およそ100行近くのコードの削減とファイルサイズの縮小だった。ユーザーフレンドリーなHTMLウェブサイトを開発することは、時間もかかることなので、独自のカスタムHTML5動画プレイヤーを作るようなプロジェクトに取り組む前に、今世に出ている10個のHTML5動画プレイヤーをチェックして、それらが成果を挙げるかどうかを見てみよう。

LeanBack Player

LeanBack PlayerはJavaScriptとHTML5を使用して、キーボードショートカット付きのパワフルな動画プレイヤーのインターフェースを作る。Chrome、Firefox、Opera、Safari、Explorerに対応。Android、iOS、BlackBerry、HP、webOS、Mozilla Mobile、Windows phonesを含む主要モバイルプラットフォームにも対応。LeanBack Playerは、H.264、Ogg、WebM、Mp3のような様々な音声および動画コーデックにも対応している。サイトとのシームレスな統合のためにCSSを使ってLeanBack Playerを簡単にカスタマイズすることもできる。

MediaElement.js

MediaElement.jsは、純粋なHTMLとCSSを使って作られたHTML5音声および動画プレイヤーだ。HTML5に対応していない古いブラウザに対しては、MediaElement APIを模倣した人気のJava Silverlightプレイヤーと同様にカスタムFlashプレイヤーを提供する。WordPress、Drupal、Joomla、iQuery、BlogEngine.NET、Ruby gem、Plone folkについては、提供されたプラグインのおかげでより簡単にサイトに埋め込むことができる。MediaElement.jsも、コントロールバー上にどのボタンを表示するかの管理権をあなたに与える。

J-MediaElement

以前はmediaelement.jsという名前だったHTML5動画プレイヤーと混同してはならないが、J-Media Element player、もしくは略してJMEもまたHTML5音声および動画再生の選択肢である。JMEにはFlashフォールバックシステムがあり、このデベロッパーは、直感的なDOM-APIとセマンティック・コーディング構造で作られたプレイヤーの柔軟性を誇りにしている。Appleのモバイルデバイスにも対応し、キーボードショートカット、フルスクリーンモードがあり、字幕を提供、CSSを使って簡単にスキンを変更することもできる。

VideoJS

このリストですでに挙げたいくつかのプレイヤーと全く似たような名前を持つVideoJSは、フルスクリーンモード、字幕再生機能のようないくつかの追加機能のためにJavaScriptが埋め込まれたHTML5動画プレイヤーである。VideoJSは、HTML5版と同じHTMLとCSSファイルを使用したFlashフォールバックを提供し、視聴者がどのプレイヤーで締めくくろうと関係なく一定の外観を与えている。

SublimeVideo

SublimeVideoもまた、読んで字の通りの名前を持ったHTML5動画プレイやーである。スタンダードなFlashフォールバック、iOS対応、フルスクリーンモードを提供しているSublimeVideoは、あなたがFlashプレイヤーから視聴しているにしろHTML5プレイヤーから視聴しているにしろ、一貫したユーザーインターフェースを持ち、あらゆるブラウザやデバイスに対応している。さらに、ワンクリックでSD/HDのビデオソースを変換したり、プレイリストを作成したり、自分のサイトのリアルタイムの動画使用統計を閲覧することもできる。しかし、それだけではない。SublimeVidoeはクラウド内にあるため、あなたは常に最新バージョンを手に入れることができるのだ。

JW Player

JW PlayerはHTML5の新顔ではない。それは、HTML5と共に進化し、変化し、成長してきた。JW Playerのデベロッパーは、2005年から動画プレイヤーの世界にいて、全てのトレンド、インターフェース、視聴者の要求に適応し、今でもウェブの一流動画プレイヤーの1つの役割を維持している。主要なブラウザとモバイルプラットフォーム全てに対応し、スキン変更が可能で、Flashフォールバックを提供している。さらには、キーボードショートカット制御や字幕のためのプラグインも備え、WordPressとDrupal用のプラグインもある。

Projekktor

Projekktorは、子供の頃のことを思い出させるSaturday night slideshowを思い起こすような名前かもしれないが、それはもっと簡単に使えて、スライドショープロジェクターのように故障することはないだろう。Projekktorは、本編前後の広告を入れることができるため、動画から広告収入を生み出すことを可能にする。また、プレイリストオプションやフルスクリーンモードを提供し、RTMP対応のFlashフォールバックや統一されたJavaScript APIもある。自分のサイトと完璧にマッチするように簡単に組み込んだりスキンを変更することも可能だ。

Dark Onyx

Dark Onyxにできないことは何か?これは単なる動画プレイヤーではない。あらゆる規模のビジネスや組織のためにデザインされた動画プラットフォームだ。Dark Onyxは、あなたが簡単にプレイヤーの外観をカスタマイズしたり、動画を簡単なマウスクリックだけで複数のソーシャルメディアプラットフォームで共有したり、外部プレイリストを作成したり、独自の広告を作成したりすることを可能にする。このプレイヤーは、4つの異なるバージョンで提供され、無料バージョンもある。全ての商用バージョンでは、DarkOnyxのマークを削除したり、それをあなた独自のものに置き換えることが可能で、直接的なテックサポートも含まれている。

Flare Video

FlareVideoは、Flashフォールバック付きのオープンソースのHTML5動画プレイヤーで、商用利用に対しても完全無料だ。このプレイヤーは、CSSを使って簡単にスキン変更が可能で、あらゆるサイトデザインや色の組み合わせと完璧に調和させることができる。FlareVideoは、フルスクリーンモードやキーボードショートカットのような基本機能のみを提供することによって、動画再生をシンプルに、ファイルサイズを最小限にしている。

YouTube

このリストにYouTubeを含めないわけがない。YouTubeの美しさは、ちょうどSublimeVideoのようである。自分でバグ修正、更新やその他すべてのことをアップグレードするオンラインベースの動画プレイヤーであるため、あなたはその点について心配する必要がない。さらにYouTubeの良いところは、使うのがばかばかしいほど簡単であること以外に、利益の共有を提供していることだ。あなたの動画がレビューを獲得すると、YouTubeがあなたに支払いをするのだ。


この記事は、spyrestudiosに掲載された「10 HTML 5 Video Players」を翻訳した内容です。

こうしてみると様々な優良動画プレイヤーが既にリリースされているんですね。もちろん0からカスタムメイドすることも可能とは思いますが、使えそうなものがあれば利用を検討してみては。 — SEO Japan [G+]

記事キーワード

  • Facebook
  • X
  • はてなブックマーク
  • pocket
  • LINE
  • URLをコピー
    URLをコピーしました!

編集者情報

  • X
  • Facebook

アイオイクス SEO Japan編集部

2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO(コンバージョン最適化)を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。

メディアTOPに戻る

RECRUIT

一緒に働く人が大事な今の時代だからこそ、実力のある会社で力をつけてほしい。
自分を成長させたい人、新しいチャレンジが好きな人は、いつでも歓迎します。