论坛 › 欢乐水吧 › 动图做播放器按钮【动图可停第一帧上】

亚伦影音工作室 发表于 2024-9-13 15:31

动图做播放器按钮【动图可停第一帧上】

本帖最后由 亚伦影音工作室 于 2024-9-13 16:11 编辑 <br /><br /><style>
#papa { margin: 130px 0 20px calc(50% - 721px); background:#800 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/2cf99265f8799cfbe8fe54a7cdde10ca.mp4.jpg')no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}

#play { position: absolute; width: 260px; height: 260px;top: 32%; cursor: pointer; left: 20%;z-index: 20; }
#play img{height: 100%;width: 100%;}
#vid {z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask-image: radial-gradient(black 15% ,transparent 90%);
}
#vido {z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
       
}
#lrc{left: 5%;top: 85%;}#lrcc {right:5%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000080;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
#fullscreen { position: absolute; top: 30px; right:30px;font: normal 2em/0em 楷体;color:#ccc; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id="play" title="暂停/播放"><img id="Img" src="https://pic.imgdb.cn/item/66e3dabcd9c307b7e97f97cf.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/90/63/9c/5007d20e86c2156d8625bd686381cf73/audio.mp3" autoplay loop></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/329fe97ad85fcb1e212f85efef1f37be_preview.mp4" autoplay loop muted></video>
<video id="vido" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3729fcd598e459fe535b9917b1bc1307_preview.mp4" autoplay loop muted></video>
</div>
<script>
play.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play(),image.play()):(aud.pause(),vid.pause(),vido.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">吕口口 - 放纵L
看着我的眼睛
为什么不敢看我
对你爱的入迷
你犯了错我从来都不说
哪怕别人都说是过错
我依然深爱着你
没想到这份真心
被践踏的是我
你已离我而去
为什么别说是因果
我也开始猜疑
这么爱你连她都没赢过
现在自己也陷入了困惑
原来你都是在骗我
我只能看着自己
被你伤得彻底
是我太过放纵你也只能怠慢了自己
我一次一次的想我有多么爱你
我不忍心怪你宁愿自己折磨自己
也许是别人不明白的神经
你已离我而去
为什么别说是因果
我也开始猜疑
这么爱你连她都没赢过
现在自己也陷入了困惑
原来你都是在骗我
我只能看着自己
被你伤得彻底
是我太过放纵你也只能怠慢了自己
我一次一次的想我有多么爱你
我不忍心怪你宁愿自己折磨自己
也许是别人不明白的神经
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),play.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),play.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</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 = '';
      }
      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("Img");
</script>

红影 发表于 2024-9-13 16:08

两个视频的运用漂亮，播放器也漂亮，可以一键暂停。歌曲好听。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-9-13 18:41

动画做播放器就是gif图片做播放器按钮吧，这个以前也是经常用的

小辣椒 发表于 2024-9-13 18:41

双视频背景运用漂亮

小辣椒 发表于 2024-9-13 18:42

手机欣赏效果很好，欣赏亚伦精彩制作

老谟深虑 发表于 2024-9-14 17:49

            欣赏老师的佳作，点赞！

查看完整版本: 动图做播放器按钮【动图可停第一帧上】