HTML5视频和音频播放器插件jPlayer_jQuery音乐播放器jPlayer插件的使用方法
2014-09-19 13:28:14  By: dwtedx

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+