Added support for YouTube live videos playback.

tomasfn87 · tomasfn87 · commit 6964012bccb3 · 2025-05-18T22:25:13.000-03:00
diff --git a/README.md b/README.md
@@ -10,53 +10,48 @@
 
 - Same code used in the WebApp but organized as a class; it also includes a test class; CLI app.
 
-## WebApp 
+## Web App 
 
 - Link: [`URL Parser`](https://tomasfn87.github.io/url-parser/)
 
 ### Description
 
-- [Parses](https://github.com/tomasfn87/url-parser/blob/main/index.html#L41) a URL in 4 parts:
+- [Parses](https://github.com/tomasfn87/url-parser/blob/main/index.html#L42) a URL in 4 parts:
   - `Domain`;
   - `Path`;
   - `Parameters`;
   - `Fragment`.
-- **Domain** tries to [obtain](https://github.com/tomasfn87/url-parser/blob/main/index.html#L217) the site's icon (`favicon`) using a Google API;
-- **Parameters** and **Fragment** are [parsed](https://github.com/tomasfn87/url-parser/blob/main/index.html#L24) into `key` and (optional) `value`;
-- **Decode**: press the [`Decode`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L160) button to solve encoded characters and actually read the URL's content.
-
-### [`YouTube`](https://www.youtube.com)
-
-- Supports `YouTube` - for [`videos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L344), [`playlists`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L311) and [`user uploaded videos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L385):
-  - When a `YouTube` **video**, **playlist** or **user** URL is detected, a `YouTube IFrame API player` will appear bellow the result table;
-  - **Videos**, **playlists** and **user uploaded videos** are `automatically played`;
-  - **Videos**, **playlists** and **user uploaded videos** start `muted`.
-  - YouTube Video
-    - [`https://` `www.youtube.com/watch` `?v=QD5cs3R1bL4`](https://www.youtube.com/watch?v=QD5cs3R1bL4)
-    - [`https://` `youtu.be/` `QD5cs3R1bL4`](https://youtu.be/QD5cs3R1bL4)
-  - YouTube Playlist with video
-    - [`https://` `www.youtube.com/watch` `?v=HvC96EaQDmU` `&list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl`](https://www.youtube.com/watch?v=HvC96EaQDmU&list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl)
-  - YouTube Playlist
-    - [`https://` `www.youtube.com/` `?list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl`](https://www.youtube.com/?list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl)
-  - YouTube User
-    - [`https://` `www.youtube.com/` `@Google`](https://www.youtube.com/@Google)
-    - :warning: not all user uploaded videos lists were sucessfully [loaded](https://github.com/tomasfn87/url-parser/blob/main/index.html#L488); bigger channels seem to work fine.
-
-### [`Vimeo`](https://www.vimeo.com)
-
-- [Videos](https://github.com/tomasfn87/url-parser/blob/main/index.html#L418).
-
-### [`Spotify`](https://www.spotify.com)
-
-- [Tracks](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
-- [Episodes](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
-- [Shows](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
-- [Artists](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
-- [Albums](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
-- [Playlists](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
+- **Domain** tries to [obtain](https://github.com/tomasfn87/url-parser/blob/main/index.html#L218) the site's icon (`favicon`) using a Google API;
+- **Parameters** and **Fragment** are [parsed](https://github.com/tomasfn87/url-parser/blob/main/index.html#L25) into `key` and (optional) `value`;
+- **Decode**: press the [`Decode`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L161) button to solve encoded characters and actually read the URL's content.
+
+### Media Players supported
+
+#### [`YouTube`](https://www.youtube.com)
+
+- [`Videos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L344);
+- [`Playlists`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L311;)
+- [`Lives`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L385);
+- [`User uploaded videos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L411).
+
+#### [`Vimeo`](https://www.vimeo.com)
+
+- [Videos](https://github.com/tomasfn87/url-parser/blob/main/index.html#L444).
+
+#### [`Spotify`](https://www.spotify.com)
+
+- [Tracks](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- [Episodes](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- [Shows](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- [Artists](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- [Albums](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- [Playlists](https://github.com/tomasfn87/url-parser/blob/main/index.html#L465);
+- Spotify URIs are accepted and converted into URLs.
+
+#### Spotify Audio Tag for Google Tag Manager
+
 - [Contribution](https://community.spotify.com/t5/Spotify-for-Developers/Spotify-iFrame-tracking-via-GTM-Any-code/m-p/6945950) to Google [Tag Manager](https://tagmanager.google.com) / [Analytics](https://analytics.google.com) tracking solution for Spotify content:
   - [Documentation](https://github.com/tomasfn87/url-parser/blob/main/gtm/spotify-audio.json.md).
-- Spotify URIs are accepted and converted into URLs.
 
 ## Art
 
diff --git a/README.pt-br.md b/README.pt-br.md
@@ -10,53 +10,48 @@
 
 - Mesmo código usado no WebApp porém organizado como uma classe; também inclui uma classe de testes; app de ILC (CLI).
 
-## WebApp 
+## Aplicação Web 
 
 - Link: [`URL Parser`](https://tomasfn87.github.io/url-parser/)
 
 ### Descrição
 
-- [Divide](https://github.com/tomasfn87/url-parser/blob/main/index.html#L41) a URL em 4 partes:
+- [Divide](https://github.com/tomasfn87/url-parser/blob/main/index.html#L42) a URL em 4 partes:
   - `Domínio`;
   - `Caminho`;
   - `Parâmetros`;
   - `Fragmento`.
-- **Domínio** tenta [obter](https://github.com/tomasfn87/url-parser/blob/main/index.html#L217) o ícone do site (`favicon`) usando uma API do Google;
-- **Parâmetros** e **Fragmento** são [divididos](https://github.com/tomasfn87/url-parser/blob/main/index.html#L24) em `chave` e `valor` (opcional);
-- **Decodificar**: aperte o botão [`Decodificar`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L160) para resolver caracteres codificados e de fato ler o conteúdo da URL.
-
-### [`YouTube`](https://www.youtube.com)
-
-- Suporta `YouTube` - para [`vídeos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L344), [`listas de reprodução`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L311) e [`vídeos enviados pelo usuário`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L385):
-  - Quando uma URL do `YouTube` de **vídeo**, **lista de reprodução** ou **usuário** é detectada, um `Reprodutor da API de IFrame do YouTube` irá aparecer abaixo da tabela do resultado;
-  - **Videos**, **listas de reprodução** e **vídeos enviados pelo usuário** são `automaticamente executados`;
-  - **Videos**, **listas de reprodução** e **vídeos enviados pelo usuário** iniciam `mudos`.
-  - Vídeo do YouTube
-    - [`https://` `www.youtube.com/watch` `?v=QD5cs3R1bL4`](https://www.youtube.com/watch?v=QD5cs3R1bL4)
-    - [`https://` `youtu.be/` `QD5cs3R1bL4`](https://youtu.be/QD5cs3R1bL4)
-  - Lista de reprodução do YouTube com vídeo
-    - [`https://` `www.youtube.com/watch` `?v=HvC96EaQDmU` `&list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl`](https://www.youtube.com/watch?v=HvC96EaQDmU&list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl)
-  - Lista de reprodução do YouTube
-    - [`https://` `www.youtube.com/` `?list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl`](https://www.youtube.com/?list=PLUQEQQ0Bum94su5p55Hr55R97X-SsMzQl)
-  - Usuário do YouTube
-    - [`https://` `www.youtube.com/` `@Google`](https://www.youtube.com/@Google)
-    - :warning: nem todas as listas de vídeos enviados pelo usuário foram [carregadas](https://github.com/tomasfn87/url-parser/blob/main/index.html#L488) com sucesso; canais maiores parecem funcionar bem.
-
-### [`Vimeo`](https://www.vimeo.com)
+- **Domínio** tenta [obter](https://github.com/tomasfn87/url-parser/blob/main/index.html#L218) o ícone do site (`favicon`) usando uma API do Google;
+- **Parâmetros** e **Fragmento** são [divididos](https://github.com/tomasfn87/url-parser/blob/main/index.html#L25) em `chave` e `valor` (opcional);
+- **Decodificar**: aperte o botão [`Decodificar`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L161) para resolver caracteres codificados e de fato ler o conteúdo da URL.
+
+### Reprodutores de Mídia suportados
+
+#### [`YouTube`](https://www.youtube.com)
+
+- [`Vídeos`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L344);
+- [`Listas de reprodução`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L311;)
+- [`Ao vivo`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L385);
+- [`Vídeos enviados pelo usuário`](https://github.com/tomasfn87/url-parser/blob/main/index.html#L411).
+
+#### [`Vimeo`](https://www.vimeo.com)
 
 - [Vídeos](https://github.com/tomasfn87/url-parser/blob/main/index.html#L418).
 
-### [`Spotify`](https://www.spotify.com)
+#### [`Spotify`](https://www.spotify.com)
 
 - [Faixas](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
 - [Episódios](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
 - [Shows](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
 - [Artistas](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
 - [Álbuns](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
 - [Listas de reprodução](https://github.com/tomasfn87/url-parser/blob/main/index.html#L439);
+- URIs do Spotify são aceitas e convertidas em URLs.
+
+#### Tag Áudio do Spotify para Google Tag Manager
+
 - [Contribuição](https://community.spotify.com/t5/Spotify-for-Developers/Spotify-iFrame-tracking-via-GTM-Any-code/m-p/6945950) com a solução de tracking para Google [Tag Manager](https://tagmanager.google.com) / [Analytics](https://analytics.google.com) para conteúdo do Spotify:
   - [Documentação](https://github.com/tomasfn87/url-parser/blob/main/gtm/spotify-audio.json.pt-br.md).
-- URIs do Spotify são aceitas e convertidas em URLs.
 
 ## Arte
 
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
             YouTubeVideo: /(https?:\/\/)?((?:www|m)\.)?youtu(\.be|be\.com)\/?(?:(?:watch)?\?.*v=|embed\/)?([0-9A-Za-z_-]{11}).*/i,
             YouTubePlaylist: /(https?:\/\/)?((?:www|m)\.)?youtu(\.be|be\.com)\/?.*?(?:play)?list=([0-9A-Za-z_-]+)/i,
             YouTubeUser: /(https?:\/\/)?((?:www|m)\.)?youtu(\.be|be\.com)\/?.*@([^\/?#=]+).*/i,
+            YouTubeLive: /(https?:\/\/)?((?:www|m)\.)?youtu(\.be|be\.com)\/?(?:live\/)?([0-9A-Za-z_-]{11}).*/i,
             VimeoVideo: /(https?:\/\/)?(\w+\.)?vimeo.com\/(\d+)/i,
             SpotifyContent: /(?:https?:\/\/)?(?:\w+\.)?spotify.com\/.*(track|episode|playlist|album|artist|show)\/([^\/?#=]+)\S*/i,
             SpotifyUri: /spotify:(album|artist|episode|playlist|show|track):([^ \/?&#=]+)/i
@@ -189,7 +190,7 @@ <h2>Analysis Result:</h2>
                 const r = parseUrl(url);
                 parsedResultTableBody.innerHTML = '';
                 document.getElementById('output-container').querySelectorAll('#youtube-embed-container, .youtube-message-container').forEach(el => el.remove());
-                document.body.classList.remove('youtube-background');
+                document.body.classList.remove('media-background');
     
                 if (!r && urlInput.value) {
                     const row = parsedResultTableBody.insertRow();
@@ -302,15 +303,14 @@ <h2>Analysis Result:</h2>
                 }
     
                 addTableRow("Full URL", `<a href="${`https://${fullUrl.replace(/^\s*\w+:\/\//, '')}`}" class="url-link">${decode?decodeURIComponent(fullUrl):fullUrl}</a>`, isOdd);
-    
 
                 let link = 'https://'
                     + parsed_self_url.parts.domain.replace(/^\w+:\/\//, '')
                     + parsed_self_url.parts.path
 
                 // YouTube Playlist
                 if (regexp.YouTubePlaylist.test(url)) {
-                    document.body.classList.add('youtube-background');
+                    document.body.classList.add('media-background');
                     const match = url.match(regexp.YouTubePlaylist);
                     const playlistId = match && match[4];
                     if (playlistId) {
@@ -341,9 +341,9 @@ <h2>Analysis Result:</h2>
                         messageContainer.textContent = "Não foi possível extrair o ID da playlist.";
                         document.getElementById('output-container').appendChild(messageContainer);
                     }
-                // YouTube Video
+               // YouTube Video
                 } else if (regexp.YouTubeVideo.test(url)) {
-                    document.body.classList.add('youtube-background');
+                    document.body.classList.add('media-background');
                     const match = url.match(regexp.YouTubeVideo);
                     const videoId = match && match[4];
                     if (videoId) {
@@ -382,9 +382,35 @@ <h2>Analysis Result:</h2>
                         messageContainer.textContent = "Não foi possível extrair o ID do vídeo.";
                         document.getElementById('output-container').appendChild(messageContainer);
                     }
+                // YouTube Live
+                } else if (regexp.YouTubeLive.test(url)) {
+                    document.body.classList.add('media-background');
+                    const match = url.match(regexp.YouTubeLive);
+                    const liveId = match && match[4];
+                    if (liveId) {
+                        youtubeEmbedContainer.innerHTML = '';
+                        player = new YT.Player('youtube-embed-container', {
+                            height: '270',
+                            width: '480',
+                            videoId: liveId,
+                            playerVars: {
+                                'playsinline': 1,
+                                'autoplay': 1,
+                                'mute': 1
+                            },
+                            events: {
+                                'onReady': onPlayerReadyYouTube,
+                                'onStateChange': onPlayerStateChangeYouTube
+                            }
+                        });
+                        link +=  '?youtubelive=' + liveId;
+                        link = correctMediaLink(link);
+                        document.getElementById('media-link').innerHTML =
+                            '&nbsp;&nbsp;|&nbsp;&nbsp;<a href="' + link + '" target="_blank">Media Link</a>';
+                }
                 // YouTube User's Videos
                 } else if (regexp.YouTubeUser.test(url)) {
-                    document.body.classList.add('youtube-background');
+                    document.body.classList.add('media-background');
                     const match = url.match(regexp.YouTubeUser);
                     const userId = match && match[4];
                     if (userId) {
@@ -417,7 +443,7 @@ <h2>Analysis Result:</h2>
                     }
                 // Vimeo Video
                 } else if (regexp.VimeoVideo.test(url)) {
-                    document.body.classList.add('youtube-background');
+                    document.body.classList.add('media-background');
                     const match = url.match(regexp.VimeoVideo);
                     const videoId = match && match[3];
                     var player = new Vimeo.Player(
@@ -438,7 +464,7 @@ <h2>Analysis Result:</h2>
                         '&nbsp;&nbsp;|&nbsp;&nbsp;<a href="' + link + '" target="_blank">Media Link</a>';
                 // Spotify Content
                 } else if (regexp.SpotifyContent.test(url)) {
-                    document.body.classList.add('youtube-background');
+                    document.body.classList.add('media-background');
                     const match = url.match(regexp.SpotifyContent);
                     const contentType = match && match[1];
                     const contentId = match && match[2];
@@ -468,7 +494,7 @@ <h2>Analysis Result:</h2>
                         '&nbsp;&nbsp;|&nbsp;&nbsp;<a href="' + link + '" target="_blank">Media Link</a>';
                 } else {
                     youtubeEmbedContainer.innerHTML = '';
-                    document.body.classList.remove('youtube-background');
+                    document.body.classList.remove('media-background');
                 }
             };
 
@@ -526,6 +552,11 @@ <h2>Analysis Result:</h2>
                     const youtubevideoUrl = 'https://www.youtube.com/?v='
                         + parsed_self_url.parts.parameters.obj.youtubevideo;
                     document.getElementById('urlInput').value = youtubevideoUrl;
+                // YouTube Live from URL Parameters
+                } else if (parsed_self_url.parts.parameters.obj.youtubelive) {
+                    const youtubeliveUrl = 'https://www.youtube.com/live/'
+                        + parsed_self_url.parts.parameters.obj.youtubelive;
+                    document.getElementById('urlInput').value = youtubeliveUrl;
                 // YouTube User from URL Parameters
                 } else if (parsed_self_url.parts.parameters.obj.youtubeuser) {
                     const youtubeuserUrl = 'https://www.youtube.com/@'
diff --git a/style.css b/style.css
@@ -256,34 +256,34 @@ th, td {
     margin: 0 auto;
 }
 
-.youtube-background {
+.media-background {
     background-color: #111;
     color: #eee;
 }
 
-.youtube-background h1,
-.youtube-background h2,
-.youtube-background label {
+.media-background h1,
+.media-background h2,
+.media-background label {
     color: #eee;
 }
 
-.youtube-background .form-control {
+.media-background .form-control {
     background-color: #222;
     color: #eee;
     border-color: #555;
 }
 
-.youtube-background .form-control:focus {
+.media-background .form-control:focus {
     background-color: #222;
     border-color: #baff33;
     box-shadow: 0 0 0 0.2rem rgba(186, 255, 51, 0.25);
 }
 
-.youtube-background .form-control::placeholder {
+.media-background .form-control::placeholder {
     color: #999;
 }
 
-.youtube-background .url-table {
+.media-background .url-table {
     background-color: #222;
     color: #eee;
 }

Original file line number	Diff line number	Diff line change
`@@ -256,34 +256,34 @@ th, td {`
`256`	`256`	`margin: 0 auto;`
`257`	`257`	`}`
`258`	`258`
`259`		`-.youtube-background {`
	`259`	`+.media-background {`
`260`	`260`	`background-color: #111;`
`261`	`261`	`color: #eee;`
`262`	`262`	`}`
`263`	`263`
`264`		`-.youtube-background h1,`
`265`		`-.youtube-background h2,`
`266`		`-.youtube-background label {`
	`264`	`+.media-background h1,`
	`265`	`+.media-background h2,`
	`266`	`+.media-background label {`
`267`	`267`	`color: #eee;`
`268`	`268`	`}`
`269`	`269`
`270`		`-.youtube-background .form-control {`
	`270`	`+.media-background .form-control {`
`271`	`271`	`background-color: #222;`
`272`	`272`	`color: #eee;`
`273`	`273`	`border-color: #555;`
`274`	`274`	`}`
`275`	`275`
`276`		`-.youtube-background .form-control:focus {`
	`276`	`+.media-background .form-control:focus {`
`277`	`277`	`background-color: #222;`
`278`	`278`	`border-color: #baff33;`
`279`	`279`	`box-shadow: 0 0 0 0.2rem rgba(186, 255, 51, 0.25);`
`280`	`280`	`}`
`281`	`281`
`282`		`-.youtube-background .form-control::placeholder {`
	`282`	`+.media-background .form-control::placeholder {`
`283`	`283`	`color: #999;`
`284`	`284`	`}`
`285`	`285`
`286`		`-.youtube-background .url-table {`
	`286`	`+.media-background .url-table {`
`287`	`287`	`background-color: #222;`
`288`	`288`	`color: #eee;`
`289`	`289`	`}`