最MC论坛

标题: 一个非常靓丽的html音乐播放器代码 [打印本页]
作者: Jianghao7172    时间: 2016-11-9 16:49
标题: 一个非常靓丽的html音乐播放器代码
本帖最后由 Jianghao7172 于 2016-11-9 17:04 编辑


刚才不小心搞错了。。。重发。。

废话不多说，上图
[attach]15505[/attach]
演示地址：
  1. <html>
  2.         <head>
  3.                 <title>TCOTP Music Player</title>
  4.                 <link rel="stylesheet" type="text/css" href="css/style.css">
  5.                 <script src="js/prefixfree.min.js"></script>
  6.                 <script src="js/jquery.js"></script>
  7.                 <script src="js/index.js"></script>
  8.                 <script src="js/gg_bd_ad_720x90.js" type="text/javascript"></script>
  9.                 <script src="js/follow.js" type="text/javascript"></script>
  10.         </head>
  11.         <body>
  12.                 <video id="myVideo" preload="auto" poster="css/bg.bmp" width="380" style="display:none;" autoplay="autoplay">
  13.                         <source src="<?php echo $file_name; ?>" type="audio/mpeg">
  14.                         <p>你的浏览器不支持此播放方式</p>
  15.                 </video>
  16.                 <!--Powered by TCOTP幻影都市-->
  17.                 <div class="control" style="display: block;">
  18.                         <div class="btmControl">
  19.                                 <div class="btnPlay btn" title="播放/暂停"><span class="icon-play"></span></div>
  20.                                 <div class="progress-bar">
  21.                                         <div class="progress">
  22.                                                 <span class="bufferBar"></span>
  23.                                                 <span class="timeBar"></span>
  24.                                         </div>
  25.                                 </div>
  26.                                 <div class="sound sound2 btn" title="切换声音/静音"><span class="icon-sound"></span></div>
  27.                                 <div class="btnFS btn" title="全屏幕"><span class="icon-fullscreen"></span></div>
  28.                         </div>

  30.                 </div>
  31.                 <div style="text-align:center;clear:both;"></div>
  32.         </body>
  33. </html>
复制代码



下面是 /css/style.css 的内容
  1. * {
  2.   box-sizing: border-box;
  3. }

  5. html {
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: hidden;
  9.   /*background: #1f323e;
  10.   background: radial-gradient(80% 0%, ellipse cover, #426168 0%, rgba(49, 67, 74, 0.1) 100%), radial-gradient(20% 100%, ellipse cover, #080d11 0%, #243a43 100%);*/
  11. }

  13. video {
  14.   border-radius: 6px;
  15. }

  17. /* video container */
  18. .videoContainer {
  19.   width: 380px;
  20.   height: 163px;
  21.   position: relative;
  22.   overflow: hidden;
  23.   background: #000;
  24.   color: #ccc;
  25.   border-radius: 6px;
  26.   border: 1px solid rgba(0, 0, 0, 0.8);
  27.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  28.   margin: 50px auto 0;
  29. }

  31. .videoContainer:before {
  32.   content: '';
  33.   position: absolute;
  34.   top: 0;
  35.   right: 0;
  36.   bottom: 0;
  37.   left: 0;
  38.   box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
  39.   z-index: 6;
  40.   border-radius: 6px;
  41.   pointer-events: none;
  42. }

  44. /* video caption css */
  45. .caption {
  46.   display: none;
  47.   position: absolute;
  48.   top: 0;
  49.   left: 0;
  50.   width: 380px;;
  51.   padding: 5px 10px;
  52.   color: #ddd;
  53.   font-size: 14px;
  54.   font-weight: 300;
  55.   text-align: center;
  56.   background: rgba(0, 0, 0, 0.4);
  57.   text-transform: uppercase;
  58.   border-radius: 6px 6px 0 0;
  59.   -webkit-backface-visibility: hidden;
  60.   -moz-backface-visibility: hidden;
  61.   -ms-backface-visibility: hidden;
  62. }

  64. /*** VIDEO CONTROLS CSS ***/
  65. /* control holder */
  66. .control {
  67.   color: #ccc;
  68.   position: absolute;
  69.   /*bottom: 10px;*/
  70.   left: 10px;
  71.   width: 360px;
  72.   z-index: 5;
  73.   display: none;
  74. }

  76. /* control bottom part */
  77. .btmControl {
  78.   clear: both;
  79. }

  81. .control .btnPlay {
  82.   float: left;
  83.   width: 34px;
  84.   height: 30px;
  85.   padding: 5px;
  86.   background: rgba(0, 0, 0, 0.5);
  87.   cursor: pointer;
  88.   border-radius: 6px 0 0 6px;
  89.   border: 1px solid rgba(0, 0, 0, 0.7);
  90.   box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  91. }

  93. .control .icon-play {
  94.   background: url(css/vp_sprite.png) no-repeat -11px 0;
  95.   width: 6px;
  96.   height: 9px;
  97.   display: block;
  98.   margin: 4px 0 0 8px;
  99. }

  101. .control .icon-pause {
  102.   background: url(css/vp_sprite.png) no-repeat -34px -1px;
  103.   width: 8px;
  104.   height: 9px;
  105.   display: block;
  106.   margin: 4px 0 0 8px;
  107. }

  109. .control .selected {
  110.   font-size: 15px;
  111.   color: #ccc;
  112. }

  114. .control .sound {
  115.   width: 30px;
  116.   height: 30px;
  117.   float: left;
  118.   background: rgba(0, 0, 0, 0.5);
  119.   border: 1px solid rgba(0, 0, 0, 0.7);
  120.   border-left: none;
  121.   box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  122.   cursor: pointer;
  123. }

  125. .control .icon-sound {
  126.   background: url(css/vp_sprite.png) no-repeat -19px 0;
  127.   width: 13px;
  128.   height: 10px;
  129.   display: block;
  130.   margin: 8px 0 0 8px;
  131. }

  133. .control .muted .icon-sound {
  134.   width: 7px !important;
  135. }

  137. .control .btnFS {
  138.   width: 30px;
  139.   height: 30px;
  140.   border-radius: 0 6px 6px 0;
  141.   float: left;
  142.   background: rgba(0, 0, 0, 0.5);
  143.   border: 1px solid rgba(0, 0, 0, 0.7);
  144.   border-left: none;
  145.   box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  146. }

  148. .control .icon-fullscreen {
  149.   background: url(css/vp_sprite.png) no-repeat 0 0;
  150.   width: 10px;
  151.   height: 10px;
  152.   display: block;
  153.   margin: 8px 0 0 9px;
  154. }

  156. /* PROGRESS BAR CSS */
  157. /* Progress bar */
  158. .progress-bar {
  159.   height: 30px;
  160.   padding: 10px;
  161.   background: rgba(0, 0, 0, 0.6);
  162.   border: 1px solid rgba(0, 0, 0, 0.7);
  163.   border-left: none;
  164.   box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  165.   float: left;
  166.   width:180px;
  167. }

  169. .progress {
  170.   width: 160px;
  171.   height: 7px;
  172.   position: relative;
  173.   cursor: pointer;
  174.   background: rgba(0, 0, 0, 0.4);
  175.   /* fallback */
  176.   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px black;
  177.   border-radius: 10px;
  178. }

  180. .progress span {
  181.   height: 100%;
  182.   position: absolute;
  183.   top: 0;
  184.   left: 0;
  185.   display: block;
  186.   border-radius: 10px;
  187. }

  189. .timeBar {
  190.   z-index: 10;
  191.   width: 0;
  192.   background: -webkit-linear-gradient(top, #6bcce2 0%, #1da3d0 100%);
  193.   box-shadow: 0 0 7px rgba(107, 204, 226, 0.5);
  194. }

  196. .bufferBar {
  197.   z-index: 5;
  198.   width: 0;
  199.   background: rgba(255, 255, 255, 0.2);
  200. }

  202. /* VOLUME BAR CSS */
  203. /* volume bar */
  204. .volume {
  205.   position: relative;
  206.   cursor: pointer;
  207.   width: 70px;
  208.   height: 10px;
  209.   float: right;
  210.   margin-top: 10px;
  211.   margin-right: 10px;
  212. }

  214. .volumeBar {
  215.   display: block;
  216.   height: 100%;
  217.   position: absolute;
  218.   top: 0;
  219.   left: 0;
  220.   background-color: #eee;
  221.   z-index: 10;
  222. }
复制代码


大量js
[attach]15506[/attach]


作者: zuimc    时间: 2016-11-9 22:13
为啥不用swf
作者: MineBox    时间: 2016-11-13 16:02
666 这个好 我可以把他装到我服务器官网里 这样玩家进官网就有音乐听了
作者: FMLX    时间: 2021-2-9 12:27
支持支持!



欢迎光临 最MC论坛 (http://www.zuimc.com/) Powered by Discuz! X3.2