YouTube链接自动转播放器演示

11个月前分享 2 0
YouTube链接自动转播放器演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube链接自动转播放器</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            color: #FF0000;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }

        .description {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            border-left: 4px solid #FF0000;
        }

        .youtube-link {
            display: inline-block;
            padding: 12px 20px;
            background-color: #FF0000;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            margin: 20px 0;
            transition: all 0.3s ease;
        }

        .youtube-link:hover {
            background-color: #CC0000;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255,0,0,0.3);
        }

        .player-container {
            margin: 30px 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            background-color: #000;
        }

        .player-container iframe {
            width: 100%;
            height: 500px;
            border: none;
            display: block;
        }

        .info-box {
            background-color: #e8f4fd;
            border: 1px solid #bee5eb;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }

        .info-box h3 {
            margin-top: 0;
            color: #0c5460;
        }

        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 15px;
            border-radius: 5px;
            font-family: monospace;
            overflow-x: auto;
            margin: 15px 0;
        }

        .note {
            font-style: italic;
            color: #6c757d;
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .player-container iframe {
                height: 300px;
            }
          
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>YouTube链接自动转播放器演示</h1>
      
        <div class="description">
            <p>这个页面演示了如何使用JavaScript自动将YouTube链接转换为内嵌播放器。</p>
            <p>下面的链接会被JavaScript自动检测并转换为播放器：</p>
        </div>
      
        <!-- 这是我们要转换的YouTube链接 -->
        <a href="https://www.youtube.com/watch?v=M6AojAbC7XE" class="youtube-link">
            https://www.youtube.com/watch?v=M6AojAbC7XE
        </a>
      
        <!-- 播放器将在这里自动插入 -->
        <div id="player-container"></div>
      
        <div class="info-box">
            <h3>实现原理</h3>
            <p>JavaScript代码会自动检测页面中的YouTube链接，提取视频ID，然后创建一个嵌入播放器。</p>
          
            <div class="code-block">
// 获取所有YouTube链接<br>
const youtubeLinks = document.querySelectorAll('a.youtube-link');<br><br>

// 遍历每个链接<br>
youtubeLinks.forEach(link => {<br>
  // 提取视频ID<br>
  const videoId = extractYouTubeId(link.href);<br><br>
  if (videoId) {<br>
    // 创建播放器<br>
    const player = createYouTubePlayer(videoId);<br><br>
    // 在链接后面插入播放器<br>
    link.parentNode.insertBefore(player, link.nextSibling);<br>
  }<br>
});
            </div>
          
            <p class="note">注意：这个演示使用了固定的YouTube链接。在实际应用中，您可以将任何YouTube链接添加到页面中，只要它们有"youtube-link"类名，就会被自动转换。</p>
        </div>
    </div>

    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有带有youtube-link类的链接
            const youtubeLinks = document.querySelectorAll('a.youtube-link');
          
            // 遍历每个链接
            youtubeLinks.forEach(link => {
                // 提取YouTube视频ID
                const videoId = extractYouTubeId(link.href);
              
                if (videoId) {
                    // 创建YouTube播放器
                    const player = createYouTubePlayer(videoId);
                  
                    // 在链接后面插入播放器
                    link.parentNode.insertBefore(player, link.nextSibling);
                  
                    // 可选：隐藏原始链接
                    // link.style.display = 'none';
                }
            });
        });

        // 提取YouTube视频ID的函数
        function extractYouTubeId(url) {
            // 支持多种YouTube URL格式
            const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/;
            const match = url.match(regex);
            return match ? match[1] : null;
        }

        // 创建YouTube播放器的函数
        function createYouTubePlayer(videoId) {
            // 创建播放器容器
            const container = document.createElement('div');
            container.className = 'player-container';
          
            // 创建iframe元素
            const iframe = document.createElement('iframe');
            iframe.src = `https://www.youtube.com/embed/${videoId}`;
            iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
            iframe.allowFullscreen = true;
          
            // 将iframe添加到容器中
            container.appendChild(iframe);
          
            return container;
        }
    </script>
</body>
</html>
老孙
Your description here.
YouTube链接自动转播放器演示

相关文章
