经验分享程序开发文档资料数据资源其它资源

jquery+html5网页播放器代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+html5网页播放器代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery+html5网页播放器代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+html5网页播放器代码</title>
<link rel="stylesheet" href="css/stylesheets/style.css">
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
   
<div id="background"></div>
<div id="player">
	<div class="cover"></div>
	<div class="ctrl">
		<div class="tag">
			<strong>Title</strong>
			<span class="artist">Artist</span>
			<span class="album">Album</span>
		</div>
		<div class="control">
			<div class="left">
				<div class="rewind icon"></div>
				<div class="playback icon"></div>
				<div class="fastforward icon"></div>
			</div>
			<div class="volume right">
				<div class="mute icon left"></div>
				<div class="slider left">
					<div class="pace"></div>
				</div>
			</div>
		</div>
		<div class="progress">
			<div class="slider">
				<div class="loaded"></div>
				<div class="pace"></div>
			</div>
			<div class="timer left">0:00</div>
			<div class="right">
				<div class="repeat icon"></div>
				<div class="shuffle icon"></div>
			</div>
		</div>
	</div>
</div>
<ul id="playlist"></ul>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

(function($){
	// Settingsvar repeat = localStorage.repeat || 0,shuffle = localStorage.shuffle || 'false',continous = true,autoplay = true,playlist = [{
	title:'德国第一装甲师进行曲',artist:'德国',album:'德国第一装甲师进行曲.mp3',cover:'img/1.jpg',mp3:'mp3/deguo.mp3',ogg:''}
,{
	title:'亡灵序曲',artist:'魔兽世界',album:'魔兽世界 - 亡灵序曲.mp3',cover:'img/2.jpg',mp3:'mp3/The Dawn.mp3',ogg:''}
,{
	title:'chenparty dj.mp3',artist:'德国童声',album:'chenparty 超好听的德国童声 dj.mp3',cover:'img/3.jpg',mp3:'mp3/chenparty dj.mp3',ogg:''}
,];
	// Load playlistfor (var i=0;
	i<playlist.length;
	i++){
	var item = playlist[i];
	$('#playlist').append('<li>'+item.artist+' - '+item.title+'</li>');
}
var time = new Date(),currentTrack = shuffle === 'true' ? time.getTime() % playlist.length:0,trigger = false,audio,timeout,isPlaying,playCounts;
	var play = function(){
	audio.play();
	$('.playback').addClass('playing');
	timeout = setInterval(updateProgress,500);
	isPlaying = true;
}
var pause = function(){
	audio.pause();
	$('.playback').removeClass('playing');
	clearInterval(updateProgress);
	isPlaying = false;
}
// Update progressvar setProgress = function(value){
	var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value%60):parseInt(value%60),ratio = value / audio.duration * 100;
	$('.timer').html(parseInt(value/60)+':'+currentSec);
	$('.progress .pace').css('width',ratio + '%');
	$('.progress .slider a').css('left',ratio + '%');
}
var updateProgress = function(){
	setProgress(audio.currentTime);
}
// Progress slider$('.progress .slider').slider({
	step:0.1,slide:function(event,ui){
	$(this).addClass('enable');
	setProgress(audio.duration * ui.value / 100);
	clearInterval(timeout);
}
,stop:function(event,ui){
	audio.currentTime = audio.duration * ui.value / 100;
	$(this).removeClass('enable');
	timeout = setInterval(updateProgress,500);
}
}
);
	// Volume slidervar setVolume = function(value){
	audio.volume = localStorage.volume = value;
	$('.volume .pace').css('width',value * 100 + '%');
	$('.volume .slider a').css('left',value * 100 + '%');
}
var volume = localStorage.volume || 0.5;
	$('.volume .slider').slider({
	max:1,min:0,step:0.01,value:volume,slide:function(event,ui){
	setVolume(ui.value);
	$(this).addClass('enable');
	$('.mute').removeClass('enable');
}
,stop:function(){
	$(this).removeClass('enable');
}
}
).children('.pace').css('width',volume * 100 + '%');
	$('.mute').click(function(){
	if ($(this).hasClass('enable')){
	setVolume($(this).data('volume'));
	$(this).removeClass('enable');
}
else{
	$(this).data('volume',audio.volume).addClass('enable');
	setVolume(0);
}
}
);
	// Switch trackvar switchTrack = function(i){
	if (i < 0){
	track = currentTrack = playlist.length - 1;
}
else if (i >= playlist.length){
	track = currentTrack = 0;
}
else{
	track = i;
}
$('audio').remove();
	loadMusic(track);
	if (isPlaying == true) play();
}
// Shufflevar shufflePlay = function(){
	var time = new Date(),lastTrack = currentTrack;
	currentTrack = time.getTime() % playlist.length;
	if (lastTrack == currentTrack) ++currentTrack;
	switchTrack(currentTrack);
}
// Fire when track endedvar ended = function(){
	pause();
	audio.currentTime = 0;
	playCounts++;
	if (continous == true) isPlaying = true;
	if (repeat == 1){
	play();
}
else{
	if (shuffle === 'true'){
	shufflePlay();
}
else{
	if (repeat == 2){
	switchTrack(++currentTrack);
}
else{
	if (currentTrack < playlist.length) switchTrack(++currentTrack);
}
}
}
}
var beforeLoad = function(){
	var endVal = this.seekable && this.seekable.length ? this.seekable.end(0):0;
	$('.progress .loaded').css('width',(100 / (this.duration || 1) * endVal) +'%');
}
// Fire when track loaded completelyvar afterLoad = function(){
	if (autoplay == true) play();
}
// Load trackvar loadMusic = function(i){
	var item = playlist[i],newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'">').appendTo('#player');
	$('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');
	$('.tag').html('<strong>'+item.title+'</strong><span class="artist">'+item.artist+'</span><span class="album">'+item.album+'</span>');
	$('#playlist li').removeClass('playing').eq(i).addClass('playing');
	audio = newaudio[0];
	audio.volume = $('.mute').hasClass('enable') ? 0:volume;
	audio.addEventListener('progress',beforeLoad,false);
	audio.addEventListener('durationchange',beforeLoad,false);
	audio.addEventListener('canplay',afterLoad,false);
	audio.addEventListener('ended',ended,false);
}
loadMusic(currentTrack);
	$('.playback').on('click',function(){
	if ($(this).hasClass('playing')){
	pause();
}
else{
	play();
}
}
);
	$('.rewind').on('click',function(){
	if (shuffle === 'true'){
	shufflePlay();
}
else{
	switchTrack(--currentTrack);
}
}
);
	$('.fastforward').on('click',function(){
	if (shuffle === 'true'){
	shufflePlay();
}
else{
	switchTrack(++currentTrack);
}
}
);
	$('#playlist li').each(function(i){
	var _i = i;
	$(this).on('click',function(){
	switchTrack(_i);
}
);
}
);
	if (shuffle === 'true') $('.shuffle').addClass('enable');
	if (repeat == 1){
	$('.repeat').addClass('once');
}
else if (repeat == 2){
	$('.repeat').addClass('all');
}
$('.repeat').on('click',function(){
	if ($(this).hasClass('once')){
	repeat = localStorage.repeat = 2;
	$(this).removeClass('once').addClass('all');
}
else if ($(this).hasClass('all')){
	repeat = localStorage.repeat = 0;
	$(this).removeClass('all');
}
else{
	repeat = localStorage.repeat = 1;
	$(this).addClass('once');
}
}
);
	$('.shuffle').on('click',function(){
	if ($(this).hasClass('enable')){
	shuffle = localStorage.shuffle = 'false';
	$(this).removeClass('enable');
}
else{
	shuffle = localStorage.shuffle = 'true';
	$(this).addClass('enable');
}
}
);
}
)(jQuery);

CSS代码(style.css):

*{margin:0;padding:0;}
body{font:14px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;background:#333;color:#fff;}
a{outline:none;text-decoration:none;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
#background{background-size:cover;position:fixed;top:0;left:0;width:100%;height:100%;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;}
#player{width:500px;height:130px;padding:25px;margin:50px auto 30px;position:relative;}
#player .cover{background:rgba(0,0,0,0.5);border:1px solid #333;position:absolute;top:25px;left:25px;overflow:hidden;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;width:130px;height:130px;-moz-box-shadow:0 2px 10px black;-webkit-box-shadow:0 2px 10px black;-o-box-shadow:0 2px 10px black;box-shadow:0 2px 10px black;}
#player .cover img{-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;width:130px;height:130px;}
#player .ctrl{margin-left:155px;text-shadow:0 1px 2px #000;line-height:16px;}
#player .ctrl .tag strong,#player .ctrl .tag span{display:block;text-overflow:ellipsis;}
#player .ctrl .tag span{font-size:12px;margin-top:5px;color:#ccc;}
#player .ctrl .icon{background-repeat:no-repeat;background-position:center;display:inline-block;opacity:0.6;cursor:pointer;width:24px;height:24px;-moz-transition:0.3s;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;}
#player .ctrl .icon:hover,#player .ctrl .icon.enable{opacity:1;}
#player .ctrl .icon:active{opacity:0.3;}
#player .ctrl .control{margin-top:10px;height:25px;}
#player .ctrl .control .rewind{background-image:url(../images/rewind.png);}
#player .ctrl .control .playback{background-image:url(../images/play.png);}
#player .ctrl .control .playback.playing{background-image:url(../images/pause.png);}
#player .ctrl .control .fastforward{background-image:url(../images/fastforward.png);}
#player .ctrl .control .volume .mute{background-image:url(../images/volume.png);}
#player .ctrl .control .volume .mute.enable{background-image:url(../images/mute.png);}
#player .ctrl .control .volume .slider{margin-top:11px;margin-left:10px;width:100px;}
#player .ctrl .progress{margin-top:10px;}
#player .ctrl .progress .timer{font-size:12px;color:#ccc;margin-top:8px;}
#player .ctrl .progress .repeat,#player .ctrl .progress .shuffle{background-position:center bottom;}
#player .ctrl .progress .repeat{background-image:url(../images/repeat.png);}
#player .ctrl .progress .repeat.once,#player .ctrl .progress .repeat.all{opacity:1;}
#player .ctrl .progress .repeat.once{position:relative;}
#player .ctrl .progress .repeat.once:before{content:"1";position:absolute;top:3px;right:-2px;font-size:8px;}
#player .ctrl .progress .shuffle{background-image:url(../images/shuffle.png);}
.slider{background:rgba(0,0,0,0.3);height:5px;position:relative;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;-o-box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;box-shadow:0 1px 2px rgba(0,0,0,0.5) inset;}
.slider:hover a,.slider.enable a{opacity:1;}
.slider a{background:#fff;margin-left:-2.5px;position:absolute;opacity:0;width:5px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;-moz-transition:opacity 0.3s;-webkit-transition:opacity 0.3s;-o-transition:opacity 0.3s;transition:opacity 0.3s;}
.slider .loaded,.slider .pace{position:absolute;height:100%;opacity:0.7;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;}
.slider .loaded{background:rgba(255,255,255,0.1);}
.slider .pace{background:#258fb8;}
#playlist{background:rgba(0,0,0,0.5);width:470px;margin:0 auto 50px;padding:10px 15px;list-style:none;position:relative;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5);-o-box-shadow:0 2px 6px rgba(0,0,0,0.5);box-shadow:0 2px 6px rgba(0,0,0,0.5);}
#playlist li{color:#aaa;font-size:12px;line-height:2;padding-left:25px;cursor:pointer;text-overflow:ellipsis;-moz-transition:0.3s;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
#playlist li:hover{color:#fff;}
#playlist li.playing{background:url(../images/playing.png) no-repeat 0 center;color:#fff;font-weight:bold;}
footer{position:relative;font-size:12px;color:white;margin-top:160px;text-shadow:0 1px 2px #000;text-align:center;}
footer a{color:#fff;font-weight:bold;}
footer a:hover{text-decoration:none;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
3.30 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
3.30 MB
立即下载
蔡霞纨
了解
打赏作者 鼓励作者
Html Js 播放器
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章