Widget:Teste

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

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

   const habilidades = [];

   for (let i = 1; i <= 15; 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 = 'skillbox-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 = 'skillbox-video' + (idx === 0 ? ' active' : );

       const video = document.createElement('video');
       video.className = 'skillbox-video-element';
       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('.skillbox-tab');
   const videos = document.querySelectorAll('.skillbox-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> .skillbox-video {

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

}

.skillbox-video.active {

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

} </style>