すでに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() {
しかし、このように書くことはありません。
$(document).ready(function() { $("#jpId").jPlayer( { ready: function () { $(this).jPlayer("setMedia", { mp3: "elvis.mp3" }); } }); $("#jpId").jPlayer("play");
デモは
こちらにあります 。