使用jPlayer构建音频和视频多媒体网站探析
2012-04-18欧群雍
欧群雍
（郑州华信学院，河南 郑州 424204）
随着数字化时代的来临，图像、声音、视频等多媒体技术也有了较为成熟的发展，在网页设计中发挥着重要的作用。一个文字、图像、声音、视频结合良好的多媒体网站能够生动地向网站访问者提供互动良好的体验效果，提高网站内容可读性；对于企业来说，通过多媒体网站可以减少昂贵的印刷、压制光碟和邮寄等开支，真正做到小投入大回报；多媒体网站对于企业的形象的提高也起到不可估量的作用。
一、构建音频多媒体网站中常见方法
在网页中插入音频和视频等多媒体元素的方法很多，常见的方法有以下几种：
1.使用标签
2.使用
3.使用
使用上述方法可以网页中插入音频或视频，但也有许多局限性，而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).
