| | <!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> |
