Question 1

Aula inicial - Apresentação

Accepted Answer

:root { --player-max-width: 900px; --player-aspect-ratio: 56.25%; --play-button-color: var(--secondary); --progress-color: var(--secondary); --progress-height: 10px; --surface-bg: #000; } .player-root { max-width: var(--player-max-width); } .player-surface { position: relative; width: 100%; padding-bottom: var(--player-aspect-ratio); background-color: var(--surface-bg); border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; } .player-iframe { position: absolute; top: -3000px; bottom: -3000px; left: 0; right: 0; width: 100%; height: calc(100% + 6000px); border: 0; opacity: 0; } .player-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0,0,0,0); z-index: 5; } .play-button { width: 88px; height: 88px; border-radius: 50%; background: var(--play-button-color); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); } .play-button > svg { width: 40px; height: 40px; fill: #fff; } .progress-track { position: absolute; left: 0; right: 0; bottom: 0; height: var(--progress-height); background: rgba(255,255,255,0.08); pointer-events: none; z-index: 6; } .progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--progress-color); } (function(){ const CONFIG = { videoUrl: 'https://youtu.be/kN-yB11uWRQ', quickPartSeconds: 2, quickPartPercent: 60, initialPlaybackRate: 1, }; // carrega API uma única vez globalmente if (!window._ytQueue) { window._ytQueue = []; const s = document.createElement('script'); s.src = 'https://www.youtube.com/iframe_api'; document.head.appendChild(s); window.onYouTubeIframeAPIReady = () => window._ytQueue.forEach(fn => fn()); } const root = document.currentScript.closest('.player-root'); const surfaceEl = root.querySelector('.player-surface'); const iframeEl = root.querySelector('.player-iframe'); const overlayEl = root.querySelector('.player-overlay'); const progressEl = root.querySelector('.progress-fill'); const playBtnEl = root.querySelector('.play-button'); // ✅ bloqueia clique direito apenas neste player root.addEventListener('contextmenu', e => e.preventDefault()); function extractVideoId(url){ const match = url.match(/^.*(?:youtu.be/|v/|embed/|watch\?v=|&v=)([^#&?]{11}).*/); return match ? match[1] : null; } function loadBestThumb(id,onDone){ const candidates=[ `https://i.ytimg.com/vi_webp/${id}/maxresdefault.webp`, `https://img.youtube.com/vi/${id}/maxresdefault.jpg`, `https://img.youtube.com/vi/${id}/hqdefault.jpg` ]; let i=0; const tryNext=()=>{ if(i>=candidates.length){onDone&&onDone(null);return;} const url=candidates[i++]; const img=new Image(); img.onload=()=>{ if(img.naturalWidth<=120){tryNext();return;} surfaceEl.style.backgroundImage=`url(${url})`; onDone&&onDone(url); }; img.onerror=tryNext; img.src=url; }; tryNext(); } const id = extractVideoId(CONFIG.videoUrl); if(id) loadBestThumb(id); window._ytQueue.push(() => { const params=[ 'enablejsapi=1','controls=0','fs=0','rel=0','modestbranding=1', 'playsinline=1','iv_load_policy=3','disablekb=1' ].join('&'); iframeEl.src=`https://www.youtube.com/embed/${id}?${params}`; iframeEl.style.pointerEvents='none'; const player = new YT.Player(iframeEl, { events:{ onReady:onReady, onStateChange:onStateChange } }); let isPlaying=false, startedAt=0, pausedElapsed=0, rafId=null, duration=0; function onReady(){ try{player.setPlaybackRate(CONFIG.initialPlaybackRate);}catch(_){} forceBestQuality(); setTimeout(forceBestQuality,500); setTimeout(forceBestQuality,1500); overlayEl.addEventListener('click', togglePlayPause); } function onStateChange(event){ if(event.data===YT.PlayerState.PLAYING){ setTimeout(()=>{iframeEl.style.opacity='1';iframeEl.style.pointerEvents='auto';},80); surfaceEl.style.backgroundImage='none'; overlayEl.style.display='none'; forceBestQuality(); startProgressLoop(); setPlayIcon(false); } if(event.data===YT.PlayerState.PAUSED){ stopProgressLoop(); overlayEl.style.display='flex'; iframeEl.style.pointerEvents='none'; setPlayIcon(true); } if(event.data===YT.PlayerState.ENDED){ stopProgressLoop(true); overlayEl.style.display='flex'; iframeEl.style.pointerEvents='none'; setPlayIcon(true); } } function togglePlayPause(){ const s = player.getPlayerState(); if(s===YT.PlayerState.PLAYING){ player.pauseVideo(); return; } if([YT.PlayerState.PAUSED,YT.PlayerState.CUED,YT.PlayerState.ENDED,-1].includes(s)){ player.playVideo(); } } function setPlayIcon(show){ playBtnEl.innerHTML = show ? '

Question 2

Aula 2 - Abertura do Sistema

Accepted Answer