jquery - jPlayer マルチビデオ デモ コード?

Question

私はちょうどjPlayerを学んでいます。実行するシステムごとに適切なフォーマットを選択できる、汎用性の高さが気に入っています。HappyWorm またはサードパーティのマルチビデオ デモ コードで注意すべきものはありますか?

次のような複数のビデオ用のプレーヤーを作成したいと思います。

PS での最大化の問題について私を助けたい場合はiframe、ここで行ってください: IFRAME 内で jPlayer フルスクリーン?

Answer 1

listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='1'><img src='" + media.thumb + " ' />" + media.title +  (media.artist ? " <br /><span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";

html ファイルに新しいパラメータ「thumb」を追加しました ...

Answer 2

まず、jplayer.org のダウンロード ページにアクセスして、2.1 のソース ファイルを入手します。ソース パッケージから、圧縮されていない jplayer.playlist.js ファイルを取得します。243 行目あたりで、プレイリストの HTML を吐き出すビットを確認する必要があります。poster パラメータを使用して、サムネイルをプレイリスト HTML に追加できます。このようなもの（テストされていないコード）：

// add the image
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "-thumb' tabindex='1'><img src='" + media.poster + "' /></a>";
// existing code to make the title
listItem += "<a href='javascript:;' class='" + this.options.playlistOptions.itemClass + "' tabindex='1'>" + media.title + (media.artist ? " <span class='jp-artist'>by " + media.artist + "</span>" : "") + "</a>";

次に、テーマ CSS ファイルの 1 つから始めて、ビデオに関連するいくつかの重要事項のリファレンスとして使用し、残りを最初からやり直して、プレーヤーをデザインに合わせて構築します。

また、setPlaylist のデモと、プレイリストでできるようになったその他すべての優れた機能もチェックしてください。

http://jplayer.org/latest/demo-02-jPlayerPlaylist/

プレイリストをロード/変更するこの方法は非常に優れていることがわかりました。