個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。
iPhoneは今後もFlashを導入しそうにないので、html5を使ってビデオ、音楽を公開する機会はますます増えそうです。
html5プレイヤーに対応していない古いブラザーに対してはjQueryで対応しています。
今回は、そんなhtml5プレイヤー(jQueryプレイヤー)のうち、無料で利用できるプレイヤーをご紹介します。

※KYUBIブログ様が2014年7月25日に「HTML5 jQuery Audio Player プラグインに脆弱性」という記事を書かれています。ご利用の際はご一読のうえ、ご活用ください。

jPlayer

jPlayer
無料で利用できるMITライセンスのプレーヤー。
クラスプラットフォームなプレイヤーです。
More Info
Demo

Open Standard Media (OSM) Player

Open-Standard-Media-OSM-Player
YouTubeやViemoなどのプレイヤーを統合したようなメディアプレイヤーフレームワーク。
MITライセンス。
More Info
Demo

Open Video Player

Open-Video-Player
いいとこどりのプレイヤーとの解説が。
More Info
Demo

jQuery YouTube TubePlayer Plugin

jQuery-YouTube-TubePlayer-Plugin
HTML5でつくられたYouTube実装用のjQueryプラグイン。
More Info
Demo

OIPlayer jQuery plugin

OIPlayer-jQuery-plugin
javaとflashのフォールバック用html5プレイヤー。
More Info
Demo

MediaElement.js

MediaElement
vide要素とaudio要素でつくれたシンプルなプレイヤー。
More Info
Demo

Videojs

video-js
オープンソースのHTML5動画プレイヤーで、
プレイヤーを埋め込むためのJavaScriptライブラリ。
More Info
Demo

JW Player

JW-Player
もっとも人気のあるビデオオプレイヤー。
現在までに200万サイト以上で利用されています。
商用の場合はライセンスの購入が必要。
More Info
Demo

IWishQuery : jQuery HTML5 audio Player

iwish
シンプルなオーディオプレイヤー用jQueryプラグイン。
More Info
Demo

jQuery Video Lightbox

jQuery-Video-Lightbox
ドラッグ&ドロップだけでhtml5ビデオを生成できるジェネレーター。
More Info
Demo

jMP3 (javaScript MP3 player)

jmp3
jsでつくられたmp3プレイヤー。
More Info
Demo

LeanBack Player

LeanBack-Player
html5 videoとaudioメディアプレイヤーを基礎としたjs製プレイヤー。
非商用でのみ無料。
More Info
Demo

mb.miniAudioPlay

miniAudioPlay
音楽再生用プラグイン。
More Info
Demo

A Responsive Audio Player jQuery Plugin for Mobiles

A-Responsive-Audio-Player-jQuery-Plugin-for-Mobiles
レスポンシブ対応のオーディオプレイヤー。
More Info
Demo

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 9
  • 30

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む