张红 发表于 2023-6-3 16:16

视频歌曲7首

<div style="position: relative;width: 1099px;height: 618px;MARGIN-LEFT:0px;margin-top:33px;box-shadow:0px 0px 0px 2px #ff00ff, 0px 0px 0px 15px #880000; ">
<style type="text/css">
#mLiDiv {position: relative; margin-top: -350px;margin-left: 100px; color:#fff; width:280px;height:200px; font-size:14px; }
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:blue; }
#tmsg {
         position: absolute;
      font: normal 16px sans-serif;
      color: #fff;
         top:590px;
      left:940px;
}
#prog {
      position: absolute;
      width: 880px;
      height: 5px;
      cursor: pointer;
         top:600px;
         left:17px;
box-shadow:0px 0px 0px 1px #fff
}

#ts {
    position: absolute;
    width:70px;
    height: 28px;
    top:577px;
    right:-30px;
    color: red;
   font-size:15px;
    font-family:微软雅黑;

}
</style>
<video id="aud"src=""autoplay="autoplay"width="1099"></video>
               <divid="prog"></div>
                <span id="tmsg">00:00 | 00:00</span>
    <div id="mLiDiv"></div>
</div>
<script>
var muAr = [["http://fs.ringop.kugou.com/G249/M03/0D/03/mYcBAF-_jPeAIoX-AWZkGKPVmPg718.mp4","容中尔甲 - 神奇的九寨"],["http://fs.ringop.kugou.com/G032/M02/00/09/wIYBAFXyEAWAPMtgBZLICcI5ROQ667.mp4","胡月 - 我热恋的故乡"],
["http://fs.ringop.kugou.com/KGTX/CLTX002/9451c8528e4941380c1b7080db053263.mp4","李玲玉-《洗衣歌》"],
["http://fs.ringop.kugou.com/G248/M08/01/00/mIcBAF-_h36AAsMzBDz-EKAqNl0541.mp4","容中尔甲 - 高原红"],
["http://fs.ringop.kugou.com/KGTX/CLTX002/8d5b18a744b8442aa75bbbaa79a101b4.mp4","杭天琪-《我热恋的故乡》"],
["http://fs.ringop.kugou.com/KGTX/CLTX002/673b717ab199cdcb91bf8dd45620d992.mp4","吴静-女儿情"],
["http://fs.ringop.kugou.com/KGTX/CLTX002/64cba87629d46533979fb2d6fbef906d.mp4","胡月 -信天游"]
];

var mLi = document.getElementById('mLiDiv');
var playIdx = 0;
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;


function iPlay(idx){
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      nameRed(playIdx);
}
aud.onended = function() {
      playIdx ++;
      if(playIdx >= muAr.length) playIdx = 0;
    aud.src = muAr;
    aud.play();
nameRed(playIdx);
}

function nameRed(){
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

      prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }

      aud.addEventListener('timeupdate', () => {
               prog.style.background= 'linear-gradient(90deg, rgba(0,0,255,1)' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });

      let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

iPlay(playIdx);
</script>

巫荣云师 发表于 2023-6-3 19:56

欣赏收藏老师的佳作《视频歌曲7首》。:handshake{:1_293:}问好点赞!

蓝魔 发表于 2023-6-3 21:44

欣赏一下，谢谢。

容轩听雨 发表于 2023-6-4 11:47

欣赏了，一组视频歌曲赏心悦目，令人陶醉，问好朋友！

久久. 发表于 2023-6-4 14:40

谢谢分享！支持点赞{:1_293:}

么念 发表于 2023-6-5 16:28

谢谢分享！   欣赏一下，谢谢！
页: [1]
查看完整版本: 视频歌曲7首