HTML5视频和音频播放器插件jPlayer_jQuery音乐播放器jPlayer插件的使用方法

jQuery音乐播放器插件、jPlayer是一款界面简洁漂亮的jPlayer播放器特效

今天要介绍的jPlayer也是基于HTML5的、不过与VideoJS不同是、jPlayer不仅支持播放视频、而且还能播放音频

并且提供了2套默认的皮肤、都非常漂亮、同时它也是基于jQuery的、
由于官方下载回来的文件只有几个核心JS、具体的例子还需要根据上面的教程自己搭建

所以为了方便大家欣赏和学习、我写好了一个demo、供大家下载

下面就一起来看看每个demo的简要实现代码示例

JS代码如下

$(document).ready(function(){
	var playlist = [{
		title:"Hidden",
		artist:"Miaow",
		mp3:"*.mp3 地址",
		oga:"*.ogg 地址",
		poster: "*.png 图片地址"
	},{
		title:"Cro Magnon Man",
		artist:"The Stark Palace",
		mp3:"*.mp3 地址",
		oga:"*.ogg 地址",
		poster: "*.png 图片地址"
	},{
		title:"Bubble",
		m4a: "*.m4a 地址",
		oga: "*.ogg 地址",
		poster: "*.jpg 图片"
	}];

	var cssSelector = {
		jPlayer: "#jquery_jplayer",
		cssSelectorAncestor: ".music-player"
	};

	var options = {
		swfPath: "*.swf 地址",
		supplied: "ogv, m4v, oga, mp3"
	};
	var myPlaylist = new jPlayerPlaylist(cssSelector, 
		playlist, options);
});

HTML 代码如下

<div class="music-player">   
	<div class="info">
		<div class="left">
			<a href="javascript:;" class="icon-shuffle"></a>
			<a href="javascript:;" class="icon-heart"></a>
		</div>
		<div class="center">
		  <div class="jp-playlist">
			<ul>
			  <li></li>
			</ul>
		  </div>
		</div>
		<div class="right">
			<a href="javascript:;" class="icon-repeat"></a>
			<a href="javascript:;" class="icon-share"></a>
		</div>
		<div class="progress jp-seek-bar">
			<span class="jp-play-bar" style="width: 0%"></span>
		</div>
		</div>
		<div class="controls">
			<div class="current jp-current-time">00:00</div>
			<div class="play-controls">
				<a href="javascript:;" class="icon-previous jp-previous" 
					title="previous"></a>
				<a href="javascript:;" class="icon-play jp-play" 
					title="play"></a>
				<a href="javascript:;" class="icon-pause jp-pause" 
					title="pause"></a>
				<a href="javascript:;" class="icon-next jp-next" 
					title="next"></a> </div>
			<div class="volume-level jp-volume-bar"> 
				<span class="jp-volume-bar-value" style="width: 0%"></span>
				<a href="javascript:;" class="icon-volume-up jp-volume-max" 
					title="max volume"></a>
				<a href="javascript:;" class="icon-volume-down jp-mute" 
					title="mute"></a>
			</div>
		</div>
	<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>

这样一个简单的 HTML 播放器就做好了、大家可以在源代码里面下载例子

下面给大家献上源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1qWryVCg 密码: 89h0