HTMLインターフェースを備えた優れたFlashプレーヤーを見つけるという問題は、多くを占めています。 Habréでのみ、同様のトピックに関する多くの記事を見つけることができます。 私のニーズに合わせて、公式サイトのControlbarプラグインでFlowplayerを使用しました。 しかし、何かが欠けていました...
jQuery UIテーマの便利さを使用してコントロールのスタイルを決定することになりました。 プラグインを自分で記述する必要があることは明らかでした。 あなたはカットの下でそれから来たものを見ることができます。
juifpプラグイン（覚えやすい： JクエリUI F低Pレイヤー）は、flowplayerに接続すると、指定されたコンテナーにHTMLプレーヤーコントロールを作成します。
$f().juifp(container, [options]) // $f().juifp('div#juifp-container', { height: 30, showMute: false })
したがって、Flash要素は非表示にでき、HTML要素のみを使用して再生を制御できます。
プラグインを作成するとき、私はmp3の再生に焦点を当てましたが、ビデオにはすべてが当てはまることに注意する必要があります。 全画面ボタンを追加しないと......
デフォルト設定を使用する場合のプレーヤーの例：
なぜflowplayerですか？
flowplayerチームが使用するコードのスタイルは、多くの点でjQueryに似ていますが、個人的には非常に便利です。 Flowplayerもかなりよく文書化されています。 まあ、一般的に-私はこのチームの別の開発-jQueryツールを見つけたときに出くわし、私はこれらのツールが本当に好きでした。 ）
なぜjQuery UIなのか？
私の意見では、jQuery UIチームは多くの優れたツールを作成し、それらに共通のテーマを使用して素晴らしい仕事をしました。 これと、一般的なjQueryの人気を考えると、jQuery UIテーマに基づいて決定されました。 はい、jQuery UIと互換性のある独自のテーマを簡単に作成できることを忘れないでください。
flowplayerのJavascriptプラグイン
私は、javascriptプラグインを書くことに専念しないことにしました。 これは、off.sayteの便利なヘルプです。 そして、これはすべて私の例で見ることができます。 （ところで、一般に、プレーヤーのオフサイトのすべての情報は、完全かつ明確に表示されることに注意してください。）
それで何？
プラグイン自体はjuifp-1.0.source.jsファイルにあります
この場合はjQuery UI ThemeRollerツールが利用できるため、FireFoxブラウザーでデモを見るのが最適です。 これにより、テーマの変更がプラグインの外観にどのように影響するかをすぐに評価できます
ここで作業デモ
誰もが見ている間に、簡単な情報を提供します。
可能なオプション（以下の例はデフォルト値を示しています）：
// . // ( , play ) controls: [ 'seek-prev', 'stop', 'play', 'seek-next' ], // ( title) buttonsTitle: { play: 'Play', stop: 'Stop', pause: 'Pause', prev: 'Prev', next: 'Next', mute: 'Mute', unmute: 'Unmute' }, // true ui-corner-all // false - roundCorners: true, // Mute showMute: true, // showVolumebar: true, // - (0-100) defaultVolume: 50, // - . - 150 progressbarWidth: 300, // . - 50 volumebarWidth: 100, // . 0 - elementsMargin: 1, // . - 16 height: 26
オプションを使用して、これからプラグインの外観を取得できます
例えば、
プラグインをデフォルト値で接続するための最小コード
$f().juifp(container);
containerは、プラグインを配置する要素のセレクターです。
覚えておいてください
1. [ 次へ]および[ 前 へ]ボタンはまだアクションを実行しません。
2.プレーヤー内でファイル名を表示することに関して疑問が生じる可能性は十分にあります。 私は長い間heしていました-タイマーの左側にあるタイムライン内に曲/ファイルの名前を置くかどうか。 いくつかの実験の後、私はそれを投稿しないことにしました。 juifp-timeline-text要素は念のために残っていますが、誤解を招かない方法です。
3.プラグインは元々それ自身のために書かれているため、開発の利便性を最大限に高めるためにネイティブjavascriptのみを使用する必要はありません。 そのため、現時点では、プラグインを接続するにはjQueryと次のjQuery UIライブラリが必要です。
- jquery.ui.core
- jquery.ui.widget
- jquery.ui.mouse
- jquery.ui.slider
すべてを純粋なjavascriptで書き換える必要があると考えています。
今のところすべてです。 どんなコメントでも喜んでいます。
プラグインの最新バージョンは、常にここにあります。
キャスト：