0x26cda2b3…87d9sent to0xb8952959…ccf4·#23,991,956·view on Etherscan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:#000;height:100%;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
#c{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
video{max-height:100vh;max-width:100vw;object-fit:contain}
.hidden{display:none!important}
#l{color:#fff;font-size:14px;text-align:center;padding:40px}
.progress-wrap{width:200px;height:4px;background:#333;border-radius:2px;margin:16px auto 0;overflow:hidden}
.progress-bar{height:100%;background:#0052FF;width:0%;transition:width 0.3s}
#play-btn{display:none;width:80px;height:80px;border-radius:50%;background:rgba(0,82,255,0.9);border:none;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}
#play-btn:hover{background:#0052FF}
#play-btn svg{fill:#fff;width:32px;height:32px;margin-left:4px}
</style>
</head>
<body>
<div id="c">
<div id="l">
<div>Loading from Base...</div>
<div class="progress-wrap"><div class="progress-bar" id="progress"></div></div>
</div>
<button id="play-btn" onclick="startPlayback()">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
<video id="v0" class="hidden" playsinline></video>
<video id="v1" class="hidden" playsinline></video>
<video id="v2" class="hidden" playsinline></video>
<video id="v3" class="hidden" playsinline></video>
<video id="v4" class="hidden" playsinline></video>
<video id="v5" class="hidden" playsinline></video>
<video id="v6" class="hidden" playsinline></video>
<video id="v7" class="hidden" playsinline></video>
<video id="v8" class="hidden" playsinline></video>
<video id="v9" class="hidden" playsinline></video>
<video id="v10" class="hidden" playsinline></video>
</div>
<script>
const T=['0x4ae8bc89b1572caab629f4b98de81be6aec6901a10f6d248686848b6cb7f8ccf','0x427bc464296f3874d24af645be6391cd962a29a57c129a5d7048d08b14ee97d4','0x38e7f3c188f4b4d3e2444d90446eb9eddf898dd98c76eeee431ce652691fe5da','0x34c7ca1eed01dd0ec9c2f114e1fe68acd32b46d2f714fbbdb71ad8bb21910ed8','0x5f2a75503bfeb2f7a04090f388abe8047054995b044010bae9e1a8f1684231a4','0xc60c78380f3b6fb961a5611b20bafcdd290a163215d91616770f75044c65433e','0xeeee59c81b9f77e9e51dddb0874de9e93f0ac38cb96fcb5d18eeb0e2848d9c99','0x81fb6c3ea72e806bd66f00b323b477f1652da2056856e27b031bbfc53325428f','0x0103cb3d295009a87f3a48f27643d6ff4be662fef05e67196bf21911af205809','0x78480c0f270a991ca638c43b91f84b77d14b2f63723cf3a76c3bca2e0c1006b4','0x82bf5fda6ad091a26d44e84c406b5683cd0ac7c208a0ffbbb153df8eab8f0180'];
const R='https://mainnet.base.org';
const videos=[];
let current=0;
let loaded=0;
let ready=false;
async function fetchTx(h){
const r=await fetch(R,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({jsonrpc:'2.0',id:1,method:'eth_getTransactionByHash',params:[h]})});
const j=await r.json();
const x=j.result.input.slice(2);
let s='';for(let i=0;i<x.length;i+=2)s+=String.fromCharCode(parseInt(x.substr(i,2),16));
return s;
}
function updateProgress(){
const pct=Math.round((loaded/T.length)*100);
document.getElementById('progress').style.width=pct+'%';
}
function onVideoReady(){
loaded++;
updateProgress();
if(loaded===T.length){
ready=true;
document.getElementById('l').classList.add('hidden');
document.getElementById('play-btn').style.display='block';
videos[0].classList.remove('hidden');
}
}
function startPlayback(){
document.getElementById('play-btn').style.display='none';
videos[0].play();
}
function togglePlayback(e){
const v=videos[current];
if(v.paused){v.play();}else{v.pause();}
}
function playNext(){
if(current>=videos.length-1)return; // stop at end, no loop
videos[current].classList.add('hidden');
current++;
videos[current].classList.remove('hidden');
videos[current].currentTime=0;
videos[current].play();
}
async function init(){
const data=await Promise.all(T.map(fetchTx));
for(let i=0;i<T.length;i++){
const v=document.getElementById('v'+i);
videos.push(v);
v.src=data[i];
v.load();
v.oncanplaythrough=()=>{
if(!v._ready){v._ready=true;onVideoReady();}
};
v.onended=playNext;
v.onclick=togglePlayback;
}
}
init();
</script>
</body>
</html>