重要通知:Videobox 的作者目前已经停止了此插件的开发。最后一个版本在 Joomla 3 上面已经无法工作。请暂时不要使用此软件。等待作者推出新版本,或者,换用其它同类扩展。

上次我们介绍了 HTML5 视频 的优势和格式转换方法,以及使用规范的 HTML5 语法在网页中插入 HTML5 视频播放器的标记代码( <video> 元素)。很显然,video 元素的用法比较复杂。Joomla之门今天介绍一个 Joomla 插件,名叫 VideoBox。借助此插件,用户可以快速在 Joomla! 网页中嵌入播放 HTML5 视频。

Videobox 是一款针对 Joomla 2.5/3.0 核心的系统插件,它的主要功能就是帮助用户在网页中快速插入 HTML5 视频及音频播放代码。这听起来似乎没什么特别的,对吧?请继续耐心阅读——

有必要使用 Videobox 插件吗?

介绍 HTML5 视频规范的文章中,我们已经说过,HTML5 本身就自带了 <video> 元素来直接播放视频,无需使用第三方的 SWF 播放器。这个 <video> 标记的代码虽然稍微复杂了点,但是也不是记不住,对于熟悉 HTML 语法的用户来说,几分钟就理解并且牢记了。更有熟练用户可以将示范代码保存为文本文件,每次使用时粘贴一下,修改修改 src 属性(视频路径)就可以了。那么,我们为什么还要介绍 Videobox 插件?

这是因为,Videobox 插件拥有下列亮点:

  1. 以更简便的方式插入 HTML5 视频播放代码(类似 <video> 元素);
  2. 可以指定视频从几分几秒开始播放,而不一定都要从第0秒开始;
  3. 可选“在 lightbox 弹出窗口中播放视频”;
  4. 可在页面中插入多个视频组成“视频组”(Video Gallery);
  5. 支持插入播放视频分享网站如 Youtube.com , vimeo.com 及 youku.com(优酷)的视频;
  6. 允许在同一个页面中,通过代码来指定某些视频直接嵌入播放,某些视频弹出播放。
  7. 自动提取视频第一帧画面直接显示(嵌入播放时)或者作为链接图片(弹出播放时);
  8. 如果用来播放 HTML5 音频(mp3, ogg,wav),可上传一张图片作为播放时的背景图片。要求是:图片必须上传到与音频相同目录,并且文件名与音频文件一致。

以上亮点中,中间2、3、4、5、6五条都是 <video> 元素做不到的。

我们从 Joomla 1.5 时代起就熟悉的另一个视频播放插件 Allvideos,也能播放 HTML5 视频(通过 SWF 播放器),也支持嵌入播放 Youtube、Vimeo 和 优酷 视频,但它无法实现“指定起播点”和“弹出播放”,而且,allvideos 插件从来做不到提取视频第一帧画面直接显示,那个黑洞洞的播放窗口初始画面让很多用户很伤心。因此,Joomla之门认为:如果你的网站上只播放 HTML5 视频格式,完全可以放弃 Allvideos,转向 Videobox 插件。

Videobox 插件用法简介

Videobox 是一个标准的 Joomla 系统插件(system plugin),你下载之后可以直接通过 Joomla 后台的“扩展 -> 扩展管理”界面来安装它。然后进入后台的“扩展 -> 插件管理”页面,选择“system”这个类型,就能找到它。点击其名称,进入其参数页面,可以看到参数并没有复杂到让人眼花缭乱的地步:

Videobox 插件参数
Videobox 插件参数

对于 Joomla 新手,我们建议你只需将第一个参数“视频使用完整网址”选择为“开启”就可以了,其它参数保持默认设置不变,然后启用此插件,就可以开始使用了。

接下来,当你在 Joomla 编辑器中撰写文章时,可以直接在编辑器的“所见即所得”(WYSIWYG)状态下写入如下标记代码来使 Videobox 插件播放一段视频(注意:为了防止示范代码被系统执行,我在左侧花括号后面插入了一个空格,你在实际使用时,必须去掉这个空格):

{ videobox}video ID{ /videobox}

这是 Videobox 插件最简单的用法:把中间那个 video ID 替换成你的 HTML5 视频的真实网址,或者 Youtube 或者 优酷 视频的真实网址,就可以在前台看到视频播放画面了。

跟 Allvideos 视频播放插件一样,Videobox 插件也支持直接在标记代码中使用各项参数来对当前的视频进行细化控制(标记代码中的参数可以僭越插件参数页面的全局设置)。请看 Videobox 插件支持的各项参数:

  • width - 视频播放器宽度
  • height - 视频播放器高度
  • t_width - 缩略图宽度(仅限多视频模式及弹窗模式)
  • t_height - 缩略图高度(仅限多视频模式及弹窗模式)
  • break - 每行视频数量(仅限多视频模式)
  • pages - 每页视频数量(仅限多视频模式)
  • style - 自定义视频容器样式(仅限弹窗模式)
  • box - 点击缩略图时使用 lightbox 特效(仅限多视频及弹窗模式)
  • button - 在缩略图上显示播放按钮 (仅限多视频及弹窗模式)
  • play - 当页面加载完成之后就自动播放视频(仅限单个视频无弹窗模式)

1、直接播放远程 MP4 文件:

已知某 MP4 视频(HTML5 视频格式)的路径是 https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/007Skyfall.mp4。我们先看看直接显示播放器的代码示范(同样请注意左花括号后面那个空格是多余的):

{ videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/007Skyfall.mp4||width=640,height=365{ /videobox}

上面这段代码执行的结果就是(如果你看不到视频画面,可能是你的浏览器太落伍了,请安装 谷歌 Chrome 浏览器最新版):

{videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/007Skyfall.mp4||width=640,height=365{/videobox}

你可以看到,我在上面的代码中,除了给出视频路径,还用 width 和 height 两个参数分别指定了视频播放器的宽度和高度。视频与参数之间用双竖线符号分隔,而后面两个参数之间是英文逗号分隔的 —— 请记住这一点,即使再增加新的参数,也都是这种分隔方式。

2、弹出播放远程 MP4 文件:

我们使用参数 box,来看看同样这段视频弹出播放的效果。同时给视频播放窗口添加一个自定义标题。标记代码变成了:

{ videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/007Skyfall.mp4|Joomla之门的演示视频:标题通过单竖线来插入||box=1{ /videobox}

这里的 box=1 就表示“以弹出窗口方式播放”。上面这段代码的执行结果是:

{videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/007Skyfall.mp4|Joomla之门的演示视频:标题通过单竖线来插入||box=1{/videobox}

按理来说,在没有指定链接图片的情况下,上面这种“弹出播放”方式会自动提取视频的第一帧画面作为链接图片。不过,在这个示范中,可能由于网络连接不够通畅的原因,导致没有自动提取画面。所以你在上面看到的链接图片是一个比较丑陋的灰色图片。

3、直接播放优酷网视频:

例如有一段优酷视频的网址是 https://v.youku.com/v_show/id_XNTE5OTE3NTgw.html ,我们使用 Videobox 插件来直接播放这段视频:

代码如下:

{ videobox}https://v.youku.com/v_show/id_XNTE5OTE3NTgw.html{ /videobox}

执行结果如下:

{videobox}https://v.youku.com/v_show/id_XNTE5OTE3NTgw.html{/videobox}

4、弹出播放优酷网视频:

我们给上面的代码添加 box=1 参数就可以变成弹出播放这段视频:

代码如下:

{ videobox}https://v.youku.com/v_show/id_XNTE5OTE3NTgw.html||box=1{ /videobox}

执行结果如下:

{videobox}https://v.youku.com/v_show/id_XNTE5OTE3NTgw.html||box=1{/videobox}

5、指定起播点时间

Videobox 可以让视频从指定的时间点开始播放,而不一定要从最开头开始播放。这次用一段 mp3 格式音频文件,例如让它从第23秒开始播放,同时我们给音频添加背景图片、并且让播放窗口居中显示。标记代码为:

{ videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/xiaochenggushi.mp3#0:23||style=margin: 0 auto{ /videobox}

执行结果为:

{videobox}https://joomlagate-com.oss-cn-hangzhou.aliyuncs.com/sample/xiaochenggushi.mp3#0:23||style=margin: 0 auto{/videobox}

可以看出,“起播点”时间是通过井字符号附加到视频路径末尾来实现的。时间格式与数字钟表的时间格式相同。

6、文字链接视频弹出播放

Videobox 还有一个比较新颖的用法就是可以给文字添加链接,点击后弹出视频播放窗口。这也是利用了 videobox 插件可以给视频指定“标题”的特性 —— 在“链接”型播放模式中,将这个“标题”反过来用做了链接文字。

标记语法:

{ videobox}video|text||links=1, video2|text2||links=1{ /videobox}

上面这个语法很容易理解:英文逗号分隔的是多个链接。每一个链接中,首先是视频 ID/网址,然后竖线分隔后写入标题(链接文字),然后双竖线后面用 links=1 这个参数表示这个视频将通过文字链接弹出播放。

文件链接视频弹出播放演示:

近日,军旅歌唱家{videobox}https://v.youku.com/v_show/id_XNTE4OTkyMDYw.html|李将军||links=1{/videobox}之子、外号“{videobox}https://v.youku.com/v_show/id_XNTIzMTg3MjUy.html|海淀银枪小霸王||links=1{/videobox}”的李天一,因涉嫌轮奸女性被逮捕。

 

在撰写本文过程中,Joomla之门发现 Videobox 插件并不能像作者介绍的那样自动提取用户手工上传的图片(文件名与视频/音频文件名一致)作为缩略图。此问题已向作者反映,正在解决。至少目前你可以借助 videobox 插件以“直接显示播放器”的方式来播放 HTML5 视频/音频。

文件标题: Videobox for Joomla! 3 视频/音频弹出播放插件 v4.0.1 RC1 简繁中文版 (详情)
文件类型: zip
版本: 4.0.1 RC1
文件大小: 110 KB
下载: 182

总评分 (0)

0 (满分5分)

免费下载最新Joomla!核心中文版

扫描此二维码,立即开始下载 Joomla 3 核心中文版

付费下载汉化版扩展

付费后即可下载独家海量

Joomla! CMS 扩展汉化版

了解付费会员制度

点击这里给我发消息

了解 joomlagate.com 网站的付费会员制度