跳转到主要内容

使用Flowplayer进行视频和音频内容的简单包

项目描述

https://travis-ci.org/collective/collective.flowplayer.png?branch=master

简介

collective.flowplayer将GPL版本的Flowplayer与Plone 4.x集成。它可以播放.flv Flash视频文件、mp4文件或链接以及.mp3文件或链接。

如果您想使用collective.flowplayer与Plone 3.x,请将版本锁定为3.1.2,这是最新的3.x兼容版本。

目前开发重点在Plone 4.x上,可以通过Travis CI自动测试。

  • collective.flowplayer 4.x与Plone 4.x兼容。

  • collective.flowplayer 3.x与Plone 3.x兼容。

安装

  1. 将collective.flowplayer添加到您的buildout中,如常。请参阅http://plone.org/documentation/tutorial/buildout

    • Plone 4

      [buildout]
      ...
      parts =
          ...
          instance
      
      [instance]
      eggs =
          ...
          collective.flowplayer
    • Plone 3

      别忘了加载configure.zcml文件!请使用以下版本部分指定版本低于4的collective.flowplayer:

      [buildout]
      ...
      versions = versions
      parts =
          ...
          instance
      
      [instance]
      eggs =
          ...
          collective.flowplayer
      zcml =
          ...
          collective.flowplayer
      
      [versions]
      collective.flowplayer = 3.1.2
  2. 通过Plone的“插件产品控制面板”或ZMI中的“portal_quickinstaller”安装产品。

卸载

collective.flowplayer的旧版本已知会污染您的Plone站点。卸载该产品已被证明是困难的。

如果这是您的情况,请升级到collective.flowplayer的最新版本,然后卸载此产品。

如果您已尝试卸载该产品,现在已提供一个实用工具视图,您无需首先重新安装即可再次在您的站点上卸载。

只需访问 http://yousite.com/@@uninstall-flowplayer 并按照提供的说明操作。

用法

collective.flowplayer提供几种不同的使用模式

独立播放器

要获取独立的视频或音频播放器,只需在您的站点任何位置添加一个标准的Plone文件,并上传一个.flv或.mp3文件。您还可以添加一个Plone链接,其URL指向一个.flv或.mp3 URL。在“显示”菜单中自动选择“flowplayer”视图,将显示视频/音频播放器。

当然,您也可以手动操作。

播放列表

创建一个包含多个.mp3或.flv文件或链接的文件夹,或创建一个列出此类文件或链接的集合。然后在文件夹/集合级别的“显示”下拉菜单中选择“flowplayer”。

这将显示一个视频/音频播放器,将按顺序循环文件夹/集合中的媒体(未知文件格式将被忽略)。视频播放器的大小将根据播放列表中的最大视频进行调整。

默认情况下,在播放器下方显示一个水平可滚动的播放列表。如果您不想显示播放列表,请关闭flowplayer配置中的“showPlaylist”属性。

部件

要将视频或音频播放器放入快速工具栏中,请使用与此产品一起安装的视频播放器快速工具栏。您可以选择文件夹、集合或文件进行显示。当显示文件夹或集合时,您将获得一个类似于上述的播放列表。

请注意,快速工具栏中的播放器具有固定大小,由CSS设置。

内嵌

在上述所有情况下,视频播放器实际上是在页面加载时使用JavaScript创建的。这允许某些程度的前进降解,适用于没有Flash或JavaScript的浏览器,但更重要的是,使您能够轻松地将视频播放器插入任何地方,包括内容页面。

要创建独立的播放器,您可以使用如下标记

<a class="autoFlowPlayer" href="path/to/video-file.flv">
    <img src="path/to/splashscreen.jpg" />
</a>

如果您更喜欢,也可以在标签周围使用

Kupu集成

Kupu现在已弃用。本节保留用于旧的Plone 3安装。

为了更容易使用上述标记类型将视频或音频播放器插入到Plone内容项中,此产品安装了一些Kupu段落样式。您可以使用它们如下

视频

  1. 插入您想要使用的启动图像。您应该将其“内嵌”(而不是左/右浮动),最好放在自己的段落中。

  2. 选择图像,并将其链接到您想要播放的.flv或.mp3文件。

  3. 从样式下拉菜单中选择一个视频或音频样式。

音频

  1. 创建一个指向mp3文件的链接,例如从一些文本中创建。同样,将其放在自己的段落中。

  2. 从样式下拉菜单中选择一个“音频”样式。选择“左”和“右”样式将在左侧或右侧产生一个小播放器。选择“音频”样式将在单独的行上产生一个较大的播放器。

注释

  • 现在无法从mp4文件中检测剪辑的宽度和高度。

  • 如果您的播放器在页面加载时没有显示,但在您点击播放器容器区域后显示,请确保在播放器容器HTML标签内没有HTML代码或文本。此类代码/文本被视为播放器启动画面,播放器正在等待点击启动画面。

  • 只有当播放器容器是< div >元素时,播放器才能正确创建(如果使用音频和视频样式,Kupu会自动执行)。目前不支持使用其他容器(例如p)。

配置

Flowplayer支持大量的配置选项。其中一些选项将根据用于渲染播放器的标记设置(例如,如果存在播放列表,则仅渲染播放列表按钮,在“最小”模式下大多数控件都将被隐藏)。大多数其他选项可以在ZMI中设置。

在portal_properties中,应有一个名为flowplayer_properties的新属性表。在此设置的选项将传递到播放器的JavaScript配置中(确保您使用正确的属性类型)。对于字符串属性,您可以使用占位符${portal_url}来引用门户根的URL。这对于水印图像或播放器插件等非常有用。

以单词“param/”开头的属性被视为Flash配置属性。您可以设置诸如src(播放器Flash文件)、wmode、quality、allowscriptaccess等属性。只需使用例如param/wmode作为属性名称,例如使用‘opaque’作为属性值。

“重要提示”由于播放列表配置是包含在portal_javascript中的生成javascript文件,因此必须在更改全局播放器配置后重新加载portal_javascript,或者portal_javascript必须在调试模式下运行(不建议在生产网站上使用)。转到ZMI/portal_javascript,向下滚动并在设置flowplayer_properties后按下“保存”按钮。

由于FlowPlayer3使用更复杂的属性和插件基础设施,大多数视觉属性都定义为插件配置(例如,控制栏是一个单独的插件,具有自己的属性集)。如果您想配置FlowPlayer3插件,您应该使用属性语法定义它的Flash文件,例如使用plugins/controls/url生成配置项

{
 plugins : {
           controls : {
                        url : 'VALUE OF PROPERTY'
                      }
           }
}

要配置控制栏音量滑块的颜色,定义属性:plugins/controls/volumeSliderColor设置为值‘lime’,这将生成以下配置

{
 plugins : {
           controls : {
                        url : 'VALUE OF PROPERTY',
                        volumeSliderColor: 'lime'
                      }
           }
}

所有控制栏配置属性均在控制栏插件文档页面中描述。

有关配置选项的通用信息可以在FlowPlayer配置页面中找到。请注意,现在无法在Plone的flowplayer_properties表中指定事件(例如,onBeforeFinish事件)。

请参考http://flowplayer.org上的有用配置示例

flowplayer的商业版本

在portal_properties/flowplayer_properties中使用这些参数(当然,您可以使用不同的版本)

param/src = http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.7.swf
plugins/controls/url = http://releases.flowplayer.org/swf/flowplayer.controls-3.2.5.swf
plugins/audio/url = http://releases.flowplayer.org/swf/flowplayer.audio-3.2.2.swf

当然,您还需要添加一个“key”属性,其中包含您的许可证密钥。

有关详细信息,请参阅http://plone.org/products/collective-flowplayer/issues/10

扩展播放器运行时

可以使用javascript插件扩展播放器配置或修改播放器行为。Collective.flowplayer 使用 flowplayer.js 将播放器嵌入页面。这是最通用的嵌入版本,允许对播放器进行所有类型的配置。请阅读 Flowplayer JS API 文档 以获取更多详细信息。对于播放器扩展最重要的是 播放器检索 部分,以及 播放器配置剪辑配置 的描述。许多播放器脚本示例可以在 脚本演示 页面和 脚本文档 中找到。

扩展示例

collective.flowplayer 从页面上的所有 .autoFlowPlayer 和 .playListFlowPlayer 容器创建 Flowplayer 实例。您可以通过以下方式检索第一个播放器,例如:

$f()  or flowplayer()

或者使用以下方式迭代页面上的所有播放器:

$f("*").each

要能够在运行时配置播放器,您必须首先创建自定义javascript文件,并将此文件包含到页面中或添加到 portal_javascripts 注册表中。由于 flowplayer 使用 jQuery 来初始化自身,因此您必须使用 jQuery 语法。js 框架示例

jq(function () {

    // your javascript code goes here

})

让我们创建一个具体的例子。最明显的一个是 JavaScript 提示框

jq(function () {

    $f().onPause(function() { alert("Don't pause me!")})

})

或者(针对页面上的所有播放器)

jq(function () {

    $f("*").each( function() {
                    this.onPause(function() { alert("Don't pause me!")})
                  })

})

技巧:如果您正在使用 Firefox 并且已安装 Firebug 扩展程序,那么您可以在 flowplayer.org 或您自己的网站上针对每个可能的 Flowplayer 演示尝试这些示例。激活 Firebug 控制台并输入

$f().onPause(function() { alert("Don't pause me!")})

现在尝试启动/暂停播放器。应该会显示提示框。

升级说明

升级特定说明:从1.0到3.0

Flowplayer 配置与 collective.flowplayer 1.0 中使用的 Flowplayer 2.2 相比发生了很大变化。大多数 Flowplayer 属性会自动迁移,但也有一些问题。

  • “player”属性的内容 不会 进行迁移。如果您正在使用商业版或定制版的 Flowplayer2,请获取更新版本或根本不要升级 collective.flowplayer!

  • usePlayOverlay、useNativeFullScreen、controlsOverVideo、controlBarGloss 属性不会迁移,并且在迁移过程中被删除。在 Flowplayer 3 中没有直接等效属性。

如何升级

  • 强制构建以使用集体.flowplayer 的新版本(检查版本是否未固定,使用 bin/buildout -n)

  • 重新启动 zope 实例

  • 转到 portal_quickinstaller 或添加/删除产品控制面板,并重新安装 Flowplayer 产品

  • 转到 ZMI - portal_setup - 升级选项卡,选择 collective.flowplayer:default 配置文件,单击“选择配置文件”按钮。应该有“升级 collective.flowplayer (1.0 - 3.0)”步骤可用。确保步骤被选中,然后单击“升级”按钮。如果升级步骤未显示并且您确定(即使不确定)已迁移到最新版本,请单击“显示”按钮以显示旧升级并手动运行升级步骤。运行升级步骤几次应该是安全的。

  • 阅读 README.txt 以检查如何配置您的 Flowplayer 实例的自定义属性

变更日志

4.2.1 (2014-07-07)

  • 棕色袋发布,后期 JavaScript 加载已损坏且根本未加载 flowplayer。[do3cc]

4.2.0 (2014-07-07)

  • 完全卸载配置文件。[thet]

  • 在安装时设置我们的属性,即使 kupu 不可用也是如此。修复加载 kupu.zcml 的 zcml 条件。[maurits]

  • 稍后加载 JavaScript,这样慢速图片加载就不会导致 flowplayer 窗口太小。[do3cc]

4.1 (2014-03-20)

  • 修复配置文件以避免重复定义。[vangheem]

  • 提供更完整的卸载。[vangheem]

4.0 (2013-04-18)

  • 包含 keul 为 3.x 版本所做的修复。更新 zcml 指令以用于 dexterity。[keul, saily] 关闭 #3

  • 如果没有找到 plone.app.collection 模块,则使用不同的安装配置文件,这是 Plone 4.0.x 和 Plone 4.1.x 版本的默认设置。[saily]

  • Pep8 清理。[saily]

  • 将开发重点放在 Plone 4.x 上,并为所有 Plone 4 版本添加测试构建,包括所有版本的 Travis 测试。[saily]

  • 升级到 plone.app.testing 并删除 collective.testcaselayer。[saily]

  • 升级到最新的 V1 Bootstrap。[saily]

  • 使用版本 4.0,因为我们现在专注于 Plone 4.x 的开发。[saily]

  • Plone 4.3 兼容性。[pbauer]

3.1.2 - 2013-1-25

  • 定义initFlowplayer变量,并将可选参数“area”添加到特定区域加载flowplayer。[mathias.leimgruber]

  • 清理init.js。[mathias.leimgruber]

  • 更新意大利语翻译。[keul]

  • 将Flowplayer更新到3.2.15。[tom_gross]

3.1.1 - 2012-09-12

  • 修复manifest.in。[jensens]

3.1 - 2012-09-12

3.0 - 2012-08-22

  • 将Flowplayer更新到3.2.14。[encolpe]

  • 仅在Plone 3环境中包含simplejson。[keul]

  • 移除了对图像文件的有问题的支持。[keul]

  • 修复了一个即使产品已卸载,仍然寻找flowplayer_properties的bug。[keul]

  • 修复了测试。[keul]

  • 修复了ChangeLinkView的懒文件名属性。[encolpe]

  • 将portlet权限从“管理门户”更改为更好的“管理portlet”。[keul]

3.0rc4 - 2011-06-05

3.0rc3 - 2011-05-23

  • 修复了http://plone.org/products/collective-flowplayer/issues/8 ValueError(“无法在打开的blob上提交。”) [naro]

  • 更新到Flowplayer 3.2.7和最新插件版本。[elro]

  • 仅生成一个最小的配置全局对象。将剩余的javascript移至资源目录中的单独文件,以简化使用jslint检查和自定义。[elro]

  • 添加法语翻译。[toutpt]

  • 使kupu设置条件化。修复了kupu导入步骤依赖关系。[kiorky]

3.0rc2 - 2010-11-15

  • 为文件内容添加Dexterity行为和视图。[elro]

  • 将基本配置从AT特定配置中分离出来。[elro]

  • 更新到Flowplayer 3.2.5(插件更新到最新版本)[naro]

  • 添加iPad/iPhonejavascript插件。插件可供自定义使用,但默认不包含在javascript配置中。[naro]

  • 修复了由于使用新的解析框架而重新设计导致的链接元数据解析问题。[thet]

  • CSS简化。[thet]

  • 不要使用javascript为音频文件设置flowplayer的宽度。让CSS来设置。除了简化之外,此更改还允许轻松覆盖。[thet]

  • 在加载音频文件时不要隐藏flowplayer控件。[thet]

  • 在events.py中进行代码清理。[thet]

  • 使用hachoir库进行元数据提取,而不是使用自己的仅flv实现。部分代码来自p4a.video。[thet]

  • 测试修复和清理。[thet]

  • 将collective.flowplayer从zope2产品制作成能够提供卸载配置文件。[naro]

  • 实现了卸载配置文件的第一部分。[naro]

3.0rc1 - 2010-06-24

  • 将Flowplayer更新到3.2.2。[naro]

  • 修复了解决Flash 10.1问题的修复。[dunlapm]

3.0b7 - 2010-03-14

  • 如果Kupu不可用,则不会失败。[naro]

  • 添加了z3c.autoinclude插件。[naro]

  • 修复了从Kupu创建的音频播放器的处理。[naro]

3.0b6 - 2010-03-09

  • 将Flowplayer更新到3.1.5

  • 部分修复了class="autoFlowPlayer minimal audio"的问题。类minimal与audio结合使用仍然存在问题。[naro]

3.0b5 - 2009-12-11

  • 从javascript注册表中移除了@@前缀。[collective.flowplayer.js]这可能会使Safari和Chrome困惑。感谢dahoste指出此问题。[naro]

  • 将Flowplayer更新到3.1.4;模块更新到最新版本 [naro]

  • 为IVideo增强链接添加了头解析。这允许使用缩放属性 clip/scaling 为链接。[tom_gross]

3.0b4 - 2009-10-05

  • 依赖于plone.app.jquerytools:plone.app.jqtools已被重命名并从包中删除,因此新安装会中断。[optilude]

  • 使用IFileContent而不是IATFile,以便能够处理ATBlob。

  • 添加了空升级步骤,对于此类版本更改不需要升级。这显然不是好的解决方案。[naro]

3.0b3 - 2009-09-26

3.0b2 - 2009-09-16

  • 添加了缺失的plone.app.jqtools zcml include [naro]

  • 可以使用param/…属性指定Flash参数。‘player’属性已更改为‘param/src’。这可以用来设置例如param/wmode为‘opaque’。[naro]

3.0b1 - 2009-09-15

1.0b5 - 2009-03-18

  • 确保事件处理程序与已安装collective.flowplayer的网站的对象一起工作。[davisagli]

1.0b4 - 2009-03-06

1.0b3 - 2009-02-23

  • 添加了对链接的支持

  • 添加了测试覆盖率

1.0b2 - 2008年9月9日发布

  • 修复了portal_javascripts渲染跟踪回溯问题 [optilude]

  • 修复了图像播放器视图中的错误 [optilude]

1.0b1 - 2008年9月6日发布

  • 初始发布

项目详情


下载文件

下载适用于您的平台的文件。如果您不确定选择哪个,请了解有关安装包的更多信息。

源分布

collective.flowplayer-4.2.1.zip (450.4 kB 查看散列)

上传时间

由以下支持

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误记录 StatusPage StatusPage 状态页面