iPhone・iPadでも動画コンテンツを見れるようにするHTML5 Video Player集めました。

一昔前はPCで動画というとFlashで作成されたプレイヤーが主流でした。(今でもPCサイトの動画はフラッシュの動画が多いですが)

しかしiPhone、iPadなどがFlashプレイヤーを搭載しなかったことと、昨今の携帯がスマートフォンが主流になってきたことから各企業もiPhone、iPadでも動画が見れるようにという要望が多くなってきました。

そこで話題のHTML5のVIDEO要素などがありますがブラウザによって動画のファイル形式を変えなければならないとちょっと便利ではありません。

PCサイトとiPhone、iPadで動画を見るためにどのようなことが考えられるかというとこのような形になるのかとおもいます。

PCサイトはFlashで閲覧し、iphone、ipadを振り分けて動画ファイル(mp4)を直接閲覧

すでにフラッシュプレイヤーで動画を見せているコンテンツにはちょっと追加するだけで対応できますので、こちらが一番簡単でie6や7でも意識しないで使える方法だとおもいます。

HTML5のVIDEO要素を使って各ブラウザに対応させたフォーマットで閲覧

こちらはこれからの理想だと思いますがブラウザ毎の仕様が違うことや古いIEを検証対象にするとなると少し面倒になるとおもいます。

YOUTUBE内に動画を入れて読み込む

YOUTUBEを使うことが可能であればこちらの選択肢のひとつになるかとおもいます。

JavaScriptで作成されたビデオプレイヤー系のライブラリを活用する

こちらは色々な場所からライブラリとして提供されています。

今回はVIDEOを見せるためのいろいろなHTML5 Video Playerを集めてみました。

Video.JS

VideoJS

Demo

SublimeVideo

SublimeVideo

Demo

FlareVideo

FlareVideo

MediaElement.js

MediaElement.js

LeanBack Player


LeanBack Player

JW Player

JW Player

Projekktor

Projekktor

Demo

jMediaelement

jMediaelement

FryPlayer

FryPlayer

html5media

html5media

KalturaHTML5

HTML5 Video & Media JavaScript Library | Kaltura

HTML5 Video

Demo

Moovie

Moovie

Demo

OIPlayer

OIPlayer

Video for Everybody!

Video for Everybody!

Demo

Open Standard Media (OSM) Player

Open Standard Media (OSM) Player

Building a better HTML5 video player with Glow

Building a better HTML5 video player with Glow

Demo

Akamai’s Open Video Player

Akamai’s Open Video Player

Ambilight for Video Tag

Ambilight for Video Tag

Demo

HTML5 Video Player – Version 1.2

HTML5 Video Player – Version 1.2

Demo

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事