论坛 › 欢乐水吧 › 红尘知己

亚伦影音工作室 发表于 2025-2-26 17:53

红尘知己

本帖最后由 亚伦影音工作室 于 2025-4-24 20:09 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 680px); background:url('https://file.uhsea.com/2502/96f23c8e4e3bde0f279f91bc4f542fefHG.gif') no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#dt{
      position:absolute;z-index: 2;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }

#vid {width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

        #mboard {width:92%;height:50px;display: flex; justify-content: center; align-items: center;gap: 8px;background: #0000; position: absolute; bottom: 10px; z-index: 3;border-radius: 30px; }
        #mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
        #tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
        #volwrap { position: absolute; width: 100px; height: 80px;place-items: center;border-radius: 20px;transform:rotate(-90deg);right: -10px;bottom: 56px;}
        input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
input::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
input::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:#039C09;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient( #039C09, #039C09) 0 fill / 4 11 4 0 / 0px 0px 0 2000px;
}
#volwrap:hover #volume { opacity:1;}
        #btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { position: absolute; width: 100px; height: 2px;opacity:0;}
        #prog { --track:#eee; --prog:#039C09 ; --prg: 0%; width: 900px; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;}
#loopbnt{position:absolute; width: 30px;height: 25px; top:10px;right: 25px;filter:invert(80%)hue-rotate(180deg);cursor: pointer;}
</style>
<div id="papa">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif"id="IMG" />
</div>
<video id="vid" src="https://img2.oldkids.cn/upload/2024/06/08/vedio_260855907_20240608111934577.mp4" autoplay loop muted></video>
<div id="mboard">
        <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
        <span id="tMsg1">00:00</span>
        <span id="prog"></span>
        <span id="tMsg2">00:00</span>
        <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
        <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
<div ><img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png" id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" /></div>
</div>
</div>
<p><audio id="aud" src="http://img0.oldkids.cn/upload/2021/06/20/blog_260855907_20210620113141577.mp3" autoplay ></audio></p>

<script>
       
var lastVolume = 1, muted = false;

var imgAr = [
        'https://638183.freep.cn/638183/web/icon/play.svg',
        'https://638183.freep.cn/638183/web/icon/pause.svg',
        'https://638183.freep.cn/638183/web/icon/unmuted.svg',
        'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
        if(lastVolume === 0) return;
        muted = !muted;
        muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
        btnPlay.src = aud.paused ? imgAr : imgAr;
        btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
        if(!e.altKey) return;
        switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
        }
});

aud.onplaying = aud.onpause = () => mState();

aud.ontimeupdate = () => {
        prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
        tMsg1.innerText = s2m(aud.currentTime);
        tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
        btnMute.src = aud.volume === 0 ? imgAr : imgAr;
        volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? (aud.play(),vid.play(),image.play() ): (aud.pause(),vid.pause(),image.stop());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</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>

红影 发表于 2025-2-26 19:04

这个变色的播放框很有特色，欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-2-26 19:06

还以为是视频轮播的，原来是一整个视频呢{:4_173:}

杨帆 发表于 2025-2-26 20:06

漂亮！谢谢亚伦老师精彩分享{:4_191:}

绿叶清舟 发表于 2025-2-26 20:16

这声音有点特别，好听

查看完整版本: 红尘知己