使用jPlayer构建音频和视频多媒体网站探析

2012-04-18 02:47欧群雍
吉林广播电视大学学报 2012年12期
关键词:播放器插件浏览器

欧群雍

(郑州华信学院,河南 郑州 424204)

随着数字化时代的来临,图像、声音、视频等多媒体技术也有了较为成熟的发展,在网页设计中发挥着重要的作用。一个文字、图像、声音、视频结合良好的多媒体网站能够生动地向网站访问者提供互动良好的体验效果,提高网站内容可读性;对于企业来说,通过多媒体网站可以减少昂贵的印刷、压制光碟和邮寄等开支,真正做到小投入大回报;多媒体网站对于企业的形象的提高也起到不可估量的作用。

一、构建音频多媒体网站中常见方法

在网页中插入音频和视频等多媒体元素的方法很多,常见的方法有以下几种:

1.使用标签

标签是用以插入背景音乐,但只适用于Internet Explorer浏览器,在netscape和firefox浏览器中并不适用。该标签共有 balance、delay、loop、src、volume 五个属性,用于设置音乐左右均衡、播放延时、循环播放次数、音乐文件的路径及音量大小,通常在网页中添加背景音乐仅需要src、loop等几个主要的参数。例如:在网页中需要反复播放“music.mp3”的代码为:。其中,src="music.mp3"指定了要播放的文件,loop="-1"表示音乐无限循环播放。标签可设定参数很少,对于多个音乐文件连播及音乐播放、暂停、停止等操作不易实现,且只能支持特定的浏览器,其局限性是显而易见的。

2.使用标签

标签用于Internet Explorer3.0及以后浏览器或者其它支持Activex控件的浏览器。它可以使网页包含指定的对象,比如图像、音频、视频等。标签通常与标签一同使用,需要指定的属性较多。使用标签在网页中自动播放“music.mp3”的代码为:标签也只能支持特定的浏览器,依赖于Activex控件很容易实现音乐播放、暂停、停止等操作,但浏览器必须有相关Activex控件支持,兼容性不强。

3.使用标签

标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器。的功能也非常强大,属性也很多。它的使用方法与第一种基本一样,自动且循环播放“music.mp3”的代码为:。其中autostart用来设置打开页面时音乐是否自动播放,而hidden设置是否隐藏媒体播放器。标签是html5标签,要求较新的浏览器才能较好的支持,它依赖于插件很容易实现音乐播放、暂停、停止等操作,但浏览器必须有相关插件支持,根据插入多媒体元素的不同而指定的“pluginspage”属性。

使用上述方法可以网页中插入音频或视频,但也有许多局限性,而jPlayer很好的解决了这些问题。

二、jPlayer基础

jPlayer是个用JavaScript写的完全免费和开源的用于控制和播放mp3、mp4等音频和视频文件的jQuery插件。它在后台根据访问该网站的浏览器不同而选择Flash或html5代码来播放mp3、mp4等文件,前台播放器外观完全可以使用XHML/CSS自定义,用它可以选择需要播放的mp3文件,实现播放、暂停、停止、音量等控制,获取播放进度等信息。

使用jPlayer之前,先从“http://www.jplayer.org/download/”网站上下载“jQuery.jPlayer”插件,里面含有“Jplayer.swf”和“jquery.jplayer.min.js”两个文件,这两个文件必须上传到网站目录中,如果需要的话,也可以通过创建选项swfPath来更改路径。

jPlayer插件中的jPlayer构造器“$(id).jPlayer(Ob-ject:options):jQuery”作用是当用户给定一个id后,就会创建用户提供的选项。jPlayer使用的层必须要是空的,并且其它的应用都不能使用。jPlayer提供许多函数或选项,其中ready函数为jPlayer指定一个将要使用的可用mp3、mp4等文件,而swfPath设置字符串用于定义jPlayer的“Jplayer.swf”文件的相对或绝路径,、volume 参数用于按百分比定义音量。其他函数或选项限于篇幅不再列举。

三、jPlayer应用

以简单的网页音频播放器为例,简要阐述jPlayer应用,在这个例子中,可以实现播放、暂停、停止、静音和取消静音。

第一步,先建立网页音频播放器的HTML的文件player.html,在HTML的标签中加上以下代码:

第二步,建立main.js,把它放到Js目录下。在main.js中指定了要播放的歌曲为“media/music.mp3”,指定“Jplayer.swf”文件的路径为“swf”目录下,并实现了歌曲自动播放等操作。

$(document).ready(function(){

$("#jquery_jplayer_1").jPlayer({

ready:function(){

$(this).jPlayer("setMedia",{

mp3:"media/music.mp3",

}).jPlayer("play");//实现自动播放

},

ended:function(event){

$(this).jPlayer("play");

},

swfPath:"swf",

supplied:"mp3"

})

.bind($.jPlayer.event.play,function(){//切换歌曲

$(this).jPlayer("pauseOthers");

});

});

第三步,引入所需要的文件。

建立main.css,把它放到css目录下,CSS样式代码如下:

body{background:#eee;font-family:Verdana,Helvetica,Arial,sans-serif;margin:0;padding:0}

.example {background:#FFF;width:1000px;height:500px;font-size:80%;border:1px#000 solid;margin:0.5em 10%0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}

.example.players{float:left;margin:10px}

把“Jplayer.swf”放到 swf目录下面。

把测试用的多媒体播放文件“music.mp3”放置在“media”下面。

把下载下来的Jplayer压缩包解压缩到js目录下。

完成上述步骤后,打开“player.html”文件,即可欣赏“music.mp3”这个曲子了,还可以对这首曲子进行暂停、停止、暂停等操作。

四、结语

利用jPlayer插件可以轻松构建音频和视频多媒体网站,对于音频和视频的播放、暂停、停止、静音等各种操作,jPlayer插件已经提供,我们只需设计网站,在网站中引入jPlayer插件即可,而且jPlayer插件是兼容性很好,基本上浏览器兼容性这块不用考虑的。

[1]张晓芸,杨明.浅谈多媒体网页的设计[J].科技风,2009,(6).

[2]李安斌,曹巨江.新媒体时代的网页设计[J].艺术与设计(理论),2009,(9).

[3]隋涌.网页布局之形式原理与设计要素[J].北京印刷学院学报,2007,(3).

猜你喜欢
播放器插件浏览器
自编插件完善App Inventor与乐高机器人通信
Walkman诞生40周年 索尼适时发布NW-ZX500和NW-A100系列播放器
反浏览器指纹追踪
基于STM32的MP3播放器设计
Moon ACE播放器/放大器一体机
基于jQUerY的自定义插件开发
环球浏览器
MapWindowGIS插件机制及应用
播放器背板注塑模具设计
基于Revit MEP的插件制作探讨