| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Reproductor de Música</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| text-align: center; |
| } |
| #player { |
| width: 100%; |
| max-width: 600px; |
| height: 350px; |
| margin: 20px auto; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <h1>Reproductor de Música desde YouTube</h1> |
| <input type="text" id="youtube-url" placeholder="Ingresa la URL de YouTube" style="width: 80%; padding: 10px;"> |
| <button onclick="loadVideo()">Cargar Video</button> |
|
|
| <div id="player"></div> |
|
|
| <script> |
| |
| function onYouTubeIframeAPIReady() { |
| window.player = new YT.Player('player', { |
| height: '350', |
| width: '600', |
| videoId: '', |
| events: { |
| 'onReady': onPlayerReady, |
| 'onStateChange': onPlayerStateChange |
| } |
| }); |
| } |
| |
| |
| function onPlayerReady(event) { |
| console.log("Reproductor listo."); |
| } |
| |
| |
| function onPlayerStateChange(event) { |
| if (event.data === YT.PlayerState.ENDED) { |
| console.log("El video terminó."); |
| } |
| } |
| |
| |
| function loadVideo() { |
| var url = document.getElementById('youtube-url').value; |
| var videoId = extractVideoId(url); |
| if (videoId) { |
| player.loadVideoById(videoId); |
| } else { |
| alert('URL de YouTube no válida'); |
| } |
| } |
| |
| |
| function extractVideoId(url) { |
| var videoId = ''; |
| var regex = /(?:https?:\/\/(?:www\.)?youtube\.com\/(?:[^\/]+\/.*\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; |
| var match = url.match(regex); |
| if (match) { |
| videoId = match[1]; |
| } |
| return videoId; |
| } |
| |
| |
| var tag = document.createElement('script'); |
| tag.src = "https://www.youtube.com/iframe_api"; |
| var firstScriptTag = document.getElementsByTagName('script')[0]; |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
| </script> |
|
|
| </body> |
| </html> |