jPlayer 多视频演示代码？答案

【问题标题】：jPlayer multi-video demo code?jPlayer 多视频演示代码？
【发布时间】：2012-05-17 13:45:12
【问题描述】：

我只是在学习 jPlayer。喜欢它的多功能性，为它运行的每个系统选择合适的格式。是否有任何我应该注意的来自 HappyWorm 或第三方的多视频演示代码？

我想为多个视频创建一个播放器，如下所示：

附：如果您想在iframe 中帮助我解决最大化问题，请在此处进行：jPlayer fullscreen while inside IFRAME?

【问题讨论】：

标签： jquery html video html5-video jplayer

【解决方案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>";

在 de html 文件中添加了一个新参数 'thumb' ...

【讨论】：

【解决方案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 文件开始，作为与视频相关的一些基本要素的参考，然后从头开始重做其余部分，以构建与您的设计相匹配的播放器。

还可以查看 setPlaylist 演示以及您现在可以使用播放列表做的所有其他很棒的事情：

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

我发现这种加载/更改播放列表的方法非常棒。

【讨论】：