👰🏽 👩🏾‍🏫 🖕🏾 jPlayer-オーディオとビデオを再生するためのプラグイン ✋🏾 🌮 🍻

すでにhtml5およびflash機能を使用してオーディオファイルを再生できるaudio.jsスクリプトについて書きました。投稿は好評だったので、オーディオとビデオを再生するためのjQueryプラグインであるjPlayerについてお話したいと思います。

フォーマットのサポート：

HTML5：mp3、m4a（AAC）、m4v（H.264）、ogv、oga、wav、webm
フラッシュ：mp3、m4a（AAC）、m4v（H.264）

次のブラウザーをサポートします。

Windows：Firefox、Chrome、Opera、Safari、IE6、IE7、IE8、IE9ベータ版
OSX：Firefox、Chrome、Opera、Safari
iOS：モバイルSafari：iPad、iPhone、iPod Touch
Android：作成者はテスト用のデバイスを見つけられませんでした

jQuery 1.3.2+を使用

いくつかのコード例。

ページに接続します：

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script> <script type="text/javascript" src="js/jquery.jplayer.min.js"> </script> <script> $(document).ready(function() { /*   */ }); </script> </head> <body> <div id="jpId"></div> </body>

mp3を再生します。

 $(document).ready(function() { $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { mp3: "../mp3/elvis.mp3" }); } }); });

フォーマットを多様化します：

 $(document).ready(function() { $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { m4a: "mp3/elvis.m4a", oga: "ogg/elvis.ogg" }); }, supplied: "m4a, oga", swfPath: "/jPlayer/js" }); });

今のビデオ：

 $(function() { $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { m4v: "http://www.myDomain.com/myVideo.m4v" }).jPlayer("play"); }, supplied: "m4v", swfPath: "jPlayer/js" }); });

さまざまなビデオ形式の例：

 $(function() { // executed when $(document).ready() $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { m4v: "/media/myVideo.m4v", ogv: "/media/myVideo.ogv" }).jPlayer("play"); //   }, solution: "flash, html", supplied: "m4v, ogv", swfPath: "/scripts" }); });

しかし、このように書くことはありません。

 $(document).ready(function() { $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { mp3: "elvis.mp3" }); } }); $("#jpId").jPlayer("play"); //        });

デモはこちらにあります。

jPlayer-オーディオとビデオを再生するためのプラグイン

More articles: