小辣椒 发表于 2024-5-3 22:12

该玩就玩该浪就浪

<style>#papa { margin: 120px 0 20px calc(50% - 720px);
        width: 1273px;
        height: 640px;
        background:#000000 ;
        no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#ff00ff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#ff00ff 90%,black 1%);}
#t{position: absolute;top:180px; left:480px; width: 400px; height: 250px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}

#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:83.6%; left:70.1%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0px;
        height: 0px;
        left: 65px;
        border-width: 6px 7px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 11px;
                left: 39px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
         font: bold 18px/22px '微软雅黑',serif;
      color: #222;
         top:79%;
      left:71.4%;}

#prog {position: absolute;z-index: 91;
      width: 11%;
      height: 0.3%;
      cursor: pointer;
         top:83.6%;
color: #cccccc
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:70.5%;
border-radius: 2px;}


#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 0%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:23%;top:87%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">李代沫 - 我最亲爱的</div>
<div id="t"><img id="tu" src="https://vvlk.oss-cn-hangzhou.aliyuncs.com/fhy.gif" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://xlaj.cn/assets/file/zp/20240503113207.gif" width="100%" height="100%"></div>

<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://s138.ananas.chaoxing.com/sv-w8/audio/60/35/be/9b9d25b5204b356c2222c9657a8b6751/audio.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:12%; left:15%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `该玩就玩该浪就浪
作词：刘红军
作曲：李春亮
演唱：小琢
编曲：DJ 小鹏
制作人：李春亮
OP：海豚音乐
人这一辈子不短也不长
有沟也有坎有风也有浪
活着就要潇洒活就活出个样
潇潇洒洒做自己做永远最棒
人活一辈子就那么一晃
一晃就老了时光太匆忙
该吃你就吃该唱就大声唱
人生越活越明白再玩把疯狂
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
。。。。。。
人活一辈子就那么一晃
一晃就老了时光太匆忙
该吃你就吃该唱就大声唱
人生越活越明白再玩把疯狂
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
该玩你就玩该浪你就浪
人生不过三万天人间走一趟
这趟单程票有来没有往
错过就是一辈子别悔断肝肠
该玩你就玩该浪你就浪
人生不过几个秋匆匆梦一场
活着就要开心烦恼丢一旁
做个人生大赢家不枉此生来一趟
谢谢欣赏

`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#ffffff,#ffffff, #ffffff ' + aud.currentTime / aud.duration * 100 + '%, #999999 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;
      };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

小辣椒 发表于 2024-5-3 22:14

{:5_152:}{:5_152:}{:5_152:}

admin 发表于 2024-5-3 22:21

小辣椒 发表于 2024-5-3 22:14
亚伦这个黑的播放器皮肤，后面有时间再送你一个红的皮肤，感谢亚伦的一键停止代码 ...

好像不能一键停止谷歌游览器QQ游览器都不行 可能代码问题 {:6_174:}

小辣椒 发表于 2024-5-3 22:25

admin 发表于 2024-5-3 22:21
好像不能一键停止谷歌游览器QQ游览器都不行 可能代码问题

现在可以了，下面发帖html要统统打勾

liumang 发表于 2024-5-3 23:14

小辣椒，这个以前玩的很好播放器出来了{:5_150:}

liumang 发表于 2024-5-3 23:14

背景彩色粒子也是以前经常玩的{:5_150:}

冬天的雨 发表于 2024-5-21 21:13

哈哈，这个播放器皮肤也是用上了{:5_150:}

小辣椒 发表于 2024-5-24 19:28

冬天的雨 发表于 2024-5-21 21:13
哈哈，这个播放器皮肤也是用上了

是的，现在可以玩就拿出来晒晒:lol
页: [1]
查看完整版本: 该玩就玩该浪就浪