Fix VTV 403: add Referer/Origin headers for vtvdigital + show video before HLS attach

static/yt_live.js

@@ -819,7 +819,11 @@
     const tab=document.getElementById('vtvt-'+chId); if(tab) tab.classList.add('on');
     const video=document.getElementById('vtv-player'); const errEl=document.getElementById('vtv-err'); const loadEl=document.getElementById('vtv-load'); const errMsg=document.getElementById('vtv-err-msg');
     ensureVideoReady(video);
-    video.style.display='none'; errEl.style.display='none'; loadEl.style.display='flex';
+    // Show video BEFORE HLS attaches — prevents black screen on mobile
+    video.style.display='block';
+    video.style.visibility='hidden';
+    video.style.opacity='0';
+    errEl.style.display='none'; loadEl.style.display='flex';
     loadEl.innerHTML='<div class="vtv-spinner"></div>Đang kết nối '+ch.name+'...';
     if(_hls){_hls.destroy();_hls=null;}
     const urls=STREAMS[chId]||[];
@@ -851,19 +855,25 @@
 
       hls.on(Hls.Events.MANIFEST_PARSED,()=>{
         loadEl.style.display='none';
-        video.style.display='block';
-        // Force a frame to appear
+        // Make video visible now that HLS is ready
+        video.style.visibility='visible';
+        video.style.opacity='1';
+        // Play muted (required for mobile autoplay)
         video.play().then(()=>{
-          // Small delay to ensure first frame renders
-          setTimeout(()=>{ video.currentTime = video.currentTime; }, 100);
-        }).catch(()=>{});
+          console.log('[VTV] Playing:', name);
+        }).catch(e=>{
+          console.warn('[VTV] Play failed:', e.message);
+          // Try muted autoplay
+          video.muted=true;
+          video.play().catch(()=>{});
+        });
       });
 
       hls.on(Hls.Events.FRAG_LOADED,()=>{
-        // Stream is loading data, ensure video is visible
-        if(video.style.display === 'none'){
+        if(video.style.visibility === 'hidden'){
+          video.style.visibility='visible';
+          video.style.opacity='1';
           loadEl.style.display='none';
-          video.style.display='block';
         }
       });
 
@@ -893,7 +903,6 @@
             _tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);
           }
         }else{
-          // Non-fatal errors are usually CORS or 404 on segments — keep trying
           console.warn('HLS non-fatal error:', data.type, data.details);
         }
       });
@@ -902,12 +911,14 @@
       video.src=src;
       video.addEventListener('loadedmetadata',()=>{
         loadEl.style.display='none';
-        video.style.display='block';
+        video.style.visibility='visible';
+        video.style.opacity='1';
         video.play().catch(()=>{});
       },{once:true});
       video.addEventListener('playing',()=>{
         loadEl.style.display='none';
-        video.style.display='block';
+        video.style.visibility='visible';
+        video.style.opacity='1';
       },{once:true});
       video.addEventListener('error',()=>{
         _tryPlay(video,urls,idx+1,name,loadEl,errEl,errMsg);