JPlayerが使用する2つの主な関数の紹介
4038 ワード
前回のプラグイン構築の手順の最後のページ初期化関数の中で、最も重要なステップは、まずこの関数から話しましょう.
最初の行コード$("#jquery_jplayer_1").jPlayer()このメソッドは、jquery_jplayer_1このdivはプレーヤーに初期化して、それから括弧の中のready、swfPath、Suppliedはすべてこのプレーヤーのパラメータで、つまりJsonフォーマットのoptionsで、一つ一つ解釈します
swfPath:ブラウザがHtml 5をサポートしていない場合、Flashを使用してプレーヤーを表示します.このパラメータは、ソースファイルのjplayer.swfのパスを指します.swfPath:「/scripts/Jplayer/jplayer.swf」と書くこともできます.
supplied:現在のプレーヤーでサポートされているフォーマット
最後に、これらのパラメータが設定されたら、ready関数を呼び出すべきです.中の$(this)は、さっきのプレーヤーを指します.$(this).jPlayer(「setMedia」)は、再生するファイルを設定します.方法の中の同じjson形式のパラメータ、例えばtitle:標題、MP 3:「ファイルパス」です.
それから私のプロジェクトでは、ダイナミックに再生する必要があります.つまり、異なるボタンをクリックして異なるファイルを再生し、以下のように使用することができます.
たとえばbuttonボタンのclickイベントには、次のコードを追加できます.
ファイルのurlは私が処理して、プロジェクト外の他のファイルにアクセスするため、バックグラウンドactionでFileStreamResultのタイプを返して、ついでに貼り付けました:
pathは自分で処理することができて、このように私は動的に音楽を再生する機能を完成しました.
jplayer公式APIアドレスを添付します.http://www.jplayer.org/latest/developer-guide/
ネット上で友達がプレーヤーが隠すことができないと言っているのを見て、公式サイトで解決方法を見つけました(html 5を使う時やっと隠すことを支持するようです):
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "@Scripts.Url("~/content/test.mp3")"
//mp3:"D:\Documents\Music\test.mp3"
});
},
swfPath: "/Scripts/JPlayer",
supplied: "mp3"
});最初の行コード$("#jquery_jplayer_1").jPlayer()このメソッドは、jquery_jplayer_1このdivはプレーヤーに初期化して、それから括弧の中のready、swfPath、Suppliedはすべてこのプレーヤーのパラメータで、つまりJsonフォーマットのoptionsで、一つ一つ解釈します
swfPath:ブラウザがHtml 5をサポートしていない場合、Flashを使用してプレーヤーを表示します.このパラメータは、ソースファイルのjplayer.swfのパスを指します.swfPath:「/scripts/Jplayer/jplayer.swf」と書くこともできます.
supplied:現在のプレーヤーでサポートされているフォーマット
最後に、これらのパラメータが設定されたら、ready関数を呼び出すべきです.中の$(this)は、さっきのプレーヤーを指します.$(this).jPlayer(「setMedia」)は、再生するファイルを設定します.方法の中の同じjson形式のパラメータ、例えばtitle:標題、MP 3:「ファイルパス」です.
それから私のプロジェクトでは、ダイナミックに再生する必要があります.つまり、異なるボタンをクリックして異なるファイルを再生し、以下のように使用することができます.
たとえばbuttonボタンのclickイベントには、次のコードを追加できます.
$("#jquery_jplayer_1")
.jPlayer("stop")
.jPlayer("setMedia", {wav:"@Url.Action("GetRecordAudio")/?path='sdf'" })
.jPlayer("play");ファイルのurlは私が処理して、プロジェクト外の他のファイルにアクセスするため、バックグラウンドactionでFileStreamResultのタイプを返して、ついでに貼り付けました:
//
public FileStreamResult GetRecordAudio(string path)
{
FileStream file = new FileStream(@"D:\Documents\Music\test.wav",FileMode.Open);
return File(file, "application/octet-stream");
}pathは自分で処理することができて、このように私は動的に音楽を再生する機能を完成しました.
jplayer公式APIアドレスを添付します.http://www.jplayer.org/latest/developer-guide/
ネット上で友達がプレーヤーが隠すことができないと言っているのを見て、公式サイトで解決方法を見つけました(html 5を使う時やっと隠すことを支持するようです):
<head>
<style>
#jquery_jplayer {
display:none; /* flash */
}
</style>
<script type="text/javascript">
$("#jquery_jplayer").hide(); /* flash */
</script>
</head>
<body>
<div id="jquery_jplayer"></div>
</body>