Widget:Teste

<script src="//api.html5media.info/1.2.2/html5media.min.js"></script> <script> (function () {

   const raw = document.getElementById('infoboxboss-data');
   if (!raw) return;

   const habilidades = [];

   for (let i = 1; i <= 10; i++) {
       const nome = raw.dataset[`hab${i}`];
       const descricao = raw.dataset[`de${i}`];
       const videoFile = raw.dataset[`vid${i}`];
       if (!nome || !videoFile) continue;

       habilidades.push({
           nome,
           descricao,
           videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
           id: `video${i}`
       });
   }

   const tabsContainer = document.getElementById('skill-tabs');
   const videoContainer = document.getElementById('skill-videos');
   const descText = document.getElementById('desc-text');

   habilidades.forEach((hab, idx) => {
       // Botão
       const btn = document.createElement('button');
       btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : );
       btn.dataset.video = hab.id;
       btn.textContent = hab.nome;
       tabsContainer.appendChild(btn);

       // Vídeo
       const videoWrapper = document.createElement('div');
       videoWrapper.id = hab.id;
       videoWrapper.className = 'skill-video' + (idx === 0 ? ' active' : );

       const video = document.createElement('video');
       video.className = 'infobox-skill-video';
       video.controls = true;
       video.preload = 'auto';

       const source = document.createElement('source');
       source.src = hab.videoUrl;
       source.type = 'video/mp4';
       video.appendChild(source);

       videoWrapper.appendChild(video);
       videoContainer.appendChild(videoWrapper);
   });

   if (habilidades.length) {
       habilidades[0].descricao = habilidades[0].descricao.replace(/(.*?)/g, '$1');
       descText.innerHTML = habilidades[0].descricao;
   }

   const tabs = document.querySelectorAll('.infobox-skill-tab');
   const videos = document.querySelectorAll('.skill-video');

   tabs.forEach((tab, idx) => {
       tab.addEventListener('click', () => {
           tabs.forEach(t => t.classList.remove('active'));
           tab.classList.add('active');

           habilidades[idx].descricao = habilidades[idx].descricao.replace(/(.*?)/g, '$1');
           descText.innerHTML = habilidades[idx].descricao;

           videos.forEach(v => {
               const videoTag = v.querySelector('video');
               if (v.id === habilidades[idx].id) {
                   v.classList.add('active');
                   videoTag.currentTime = 0;
                   videoTag.play();
               } else {
                   v.classList.remove('active');
                   videoTag.pause();
               }
           });
       });
   });

   raw.remove();

})(); </script>

<style> .skill-box {

   background: none;
   color: #222;
   border-radius: 12px;
   box-shadow: none;
   width: 100%;
   max-width: 700px;
   box-sizing: border-box;
   padding: 24px 24px 20px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   backdrop-filter: blur(2px);
   margin: 0 auto 24px auto;
   margin-bottom: 0px;

}

.skill-video {

   aspect-ratio: 16 / 9;
   opacity: 0;
   transition: opacity 0.2s ease;
   visibility: hidden;
   height: 0;
   overflow: hidden;
   position: absolute;
   width: 100%;

}

.skill-video.active {

   position: static;
   opacity: 1;
   visibility: visible;
   height: auto;

}

</style>