一款简单的html播放器

  • 内容
  • 相关

一款简单的html播放器

优化HTML代码错误

歌曲配置在/music/js/index.js

效果图:

QQ截图20200406115924.png

部分代码:

<!-- 
'**************************************************************************************************
' 整理作者: 黑蜘蛛博客
' 官方网站: http://4dn.net
' 联系 Q Q: 88790363
' QQ交流群:99968722
' 功能,模板,扩展,定制请联系QQ:88790363
'**************************************************************************************************
-->
<html lang="zh-cn"><head><link href="http://libs.baidu.com/fontawesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./music/player.css">
<!--css-->
<link rel="stylesheet" href="./music/css/reset.css">
<link rel="stylesheet" href="./music/css/style.css" media="screen" type="text/css">
</head><body style="background-image: url('1.jpg');background-attachment: fixed;background-repeat: no-repeat;background-size: cover;-moz-background-size: cover"><div id="wenkmPlayera">
  <div id="wenkmPlayer" class="show">
    <div class="player " id="aio">
    
  <div class="music-player jp-video-270p">
  <div class="info">
    <div class="left">
      <a href="javascript:;" class="ico-shuffle"></a>
      <a href="javascript:;" class="ico-heart"></a>
    </div>
    <div class="center">
    <div class="jp-playlist">
      <ul style="display: block;"><li class=""><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">收费播放器 <span class="jp-artist">by 黑蜘蛛</span></a></div></li><li class="jp-playlist-current"><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="1">極楽浄土 <span class="jp-artist">by GARNiDELiA</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">IF YOU <span class="jp-artist">by BIGBANG</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">I Want You to Know <span class="jp-artist">by Zedd</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">多幸运 <span class="jp-artist">by 韩安旭</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">庄心妍 - 走着走着就散了 <span class="jp-artist">by 庄心妍</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">Adrenaline <span class="jp-artist">by Zedd</span></a></div></li><li><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">×</a><a href="javascript:;" class="jp-playlist-item" tabindex="1">Cro Magnon Man <span class="jp-artist">by The Stark Palace</span></a></div></li></ul>
    </div>
    </div>
    <div class="right">
      <a href="javascript:;" class="ico-repeat"></a>
      <a href="javascript:;" class="ico-share"></a>
    </div>
    <div class="Speed jp-seek-bar" style="width: 100%;">
      <span class="jp-play-bar" style="width: 27.7473%;"></span>
    </div>
  </div>
  <div class="controls">
    <div class="current jp-current-time">01:00</div>
    <div class="play-controls">
      <a href="javascript:;" class="ico-previous jp-previous" title="上一首"></a>
      <a href="javascript:;" class="ico-play jp-play" title="播放" style="display: none;"></a>
      <a href="javascript:;" class="ico-pause jp-pause" title="暂停" style="display: inline-block;"></a>
      <a href="javascript:;" class="ico-next jp-next" title="下一首"></a>
    </div>
    <div class="volume-level jp-volume-bar">
      <span class="jp-volume-bar-value" style="width: 80%;"></span>
      <a href="javascript:;" class="ico-volume-up music-loud" title="max volume"></a>
      <a href="javascript:;" class="ico-volume-down music-whisper" title="mute"></a>
    </div>
  </div>
  <div id="jquery_jplayer" class="jp-jplayer" style="width: 480px; height: 270px;"><img id="jp_poster_0" src="images/1.jpg" style="width: 480px; height: 270px; display: block;"><audio id="jp_audio_0" preload="metadata" src="http://link.im.com/163/411907897.mp3"></audio><video id="jp_video_0" preload="metadata" style="width: 0px; height: 0px;"></video></div>
</div>
    
    
    </div>
    
    <div class="switch-player" id="aiaa"><!--按钮-->
      <i class="fa fa-angle-right" style="margin-top: 20px;"></i>
    </div>
  </div>
</div>
<!--JS-->
<script src="./music/172.js"></script>
<script src="./music/scrollbar.js"></script>
<script src="./music/player.js"></script>
<!--JS-->
<script src="./music/js/jquery.min.js"></script>
<script src="./music/js/jquery.jplayer.min.js"></script>
<script src="./music/js/jplayer.playlist.min.js"></script>
<script src="./music/js/index.js"></script>
<style>
  body{
    margin: 0 auto;
    text-align: center;
  }
  .container {
    max-width: 580px;
    padding: 15px;
    margin: 0 auto;
  }
  
</style>
<div class="container">
  <div class="header"></div></div></body></html>
需要登录才能下载
黑蜘蛛

本文标签:

版权声明:若无特殊注明,本文皆为《ღ軍尐ღ》原创,转载请保留文章出处。

字数统计:本文共有 《5840》 个。

本文链接:一款简单的html播放器 - http://4dn.net/web/45.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

3条评论
  1. avatar

    MitoKohaku Lv.1 Chrome 92.0.4515.107 Chrome 92.0.4515.107 Windows Windows 回复

    感谢分享

    天津市河北区 联通

    1. avatar

      qwert Lv.1 Firefox 88.0 Firefox 88.0 Windows Windows 回复

      感谢分享

      江苏省泰州市 电信

      1. avatar

        coolnick Lv.1 Chrome 87.0.4280.141 Chrome 87.0.4280.141 Windows Windows 回复

        这个不错

        亚太地区

        00:00 / 00:00
        顺序播放