论坛 › 欢乐水吧 › 播放器控件设置

亚伦影音工作室 发表于 2024-4-24 11:15

播放器控件设置

本帖最后由 亚伦影音工作室 于 2024-5-13 06:30 编辑 <br /><br /><style>
#bfqbj {margin: 10px 10px;
        width: 560px;
        height: 120px;background: #000 url(https://)no-repeat center/cover;
        position: relative;overflow: hidden;
        z-index: 12345;}
#dt{position: absolute;top:41px; left:0px;width: 520px;height: 125px;z-index:3; mix-blend-mode: lighten; }
#dt img{width: 100%;}
#mplayer {z-index: 80;
        position: absolute;
        top:0px; left:0px;
        bottom: 0px;
        width: 30px;
        height: 30px;
       
        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: #eeeeee;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 281px;bottom: -35px;
        border-width: 4px 5px;
        border-color: transparent transparent transparent #eeeeee;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 8px;bottom: -35px;
                left: 266px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #ffffff;font-size: 4px;
      bottom: 70px;
      left:70px;}
#prog {position: absolute;z-index: 91;
      width: 167px;
      height: 1px;
      cursor: pointer;
         bottom: 58.5px;
left:71px;
border-radius: 2px;}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:220px;top:80px;font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66265ce40ea9cb1403e8c008.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<div id="bt">等我不再去打扰 (Live合唱版) 歌手：王一佳</div>
</div>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/8e/8d/eb/85b016270aa4a6658176936dba70db59/audio.mp3" loop autoplay></audio>

<script >
(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(),image.play() ): (aud.pause(),image.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + 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;
      };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.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 = '';
      }
      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");
</script>

马黑黑 发表于 2024-4-24 20:06

漂亮

红影 发表于 2024-4-24 20:07

这个控件好，可以直接用在帖子里了呢{:4_187:}

红影 发表于 2024-4-24 20:07

感谢亚伦老师分享{:4_187:}

醉美水芙蓉 发表于 2024-4-24 21:12

查看完整版本: 播放器控件设置