在其他网页中添加JS代码示例

使用教程

1 生成JavaScript代码

首先，在频道调用代码生成器中输入您的频道ID，然后点击"生成代码"按钮获取JavaScript代码。

提示： 生成的代码中包含一个名为 createChannelPlayer() 的函数，您需要在网页中调用这个函数来创建播放器。

2 基础集成方法

将生成的JavaScript代码复制到您的网页中，通常放在 <script> 标签内：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的视频频道</title>
    <style>
        /* 您的CSS样式 */
    </style>
</head>
<body>
    <h1>欢迎观看我的频道</h1>
    
    <!-- 播放器容器 -->
    <div id="channelContainer"></div>
    
    <script>
        // 粘贴从生成器复制的JavaScript代码到这里
        
        // 创建播放器并添加到页面
        document.addEventListener('DOMContentLoaded', function() {
            const player = createChannelPlayer();
            document.getElementById('channelContainer').appendChild(player);
        });
    </script>
</body>
</html>

3 高级使用方法

您可以自定义播放器的ID、位置和样式：

// 创建播放器并指定容器ID
const player1 = createChannelPlayer('myPlayer1');
const player2 = createChannelPlayer('myPlayer2');

// 添加到不同的容器
document.getElementById('mainContent').appendChild(player1);
document.getElementById('sidebar').appendChild(player2);

// 或者直接添加到body
document.body.appendChild(createChannelPlayer('player3'));

// 动态修改播放器样式
setTimeout(function() {
    const player = document.getElementById('myPlayer1');
    if (player) {
        player.style.width = '800px';
        player.style.margin = '20px auto';
        player.style.boxShadow = '0 8px 25px rgba(0,0,0,0.2)';
    }
}, 1000);

实际应用示例

新闻网站

在新闻文章中嵌入相关视频频道，增强内容的多媒体体验。

// 在文章末尾添加频道播放器
function addChannelToArticle(channelId) {
    // 使用生成器生成的代码
    const player = createChannelPlayer('articlePlayer');
    document.querySelector('.article-content').appendChild(player);
}

电商平台

在产品页面展示品牌宣传视频或产品演示频道。

// 在产品详情页添加演示视频
function addProductVideo(productId) {
    // 根据产品ID获取对应频道
    const player = createChannelPlayer('productVideo');
    document.getElementById('productGallery').appendChild(player);
}

教育平台

在课程页面嵌入教学视频频道，提供在线学习体验。

// 为每节课添加视频播放器
function addLessonVideo(lessonId) {
    // 动态创建播放器容器
    const container = document.createElement('div');
    container.className = 'lesson-video';
    const player = createChannelPlayer('lesson-' + lessonId);
    container.appendChild(player);
    return container;
}

实时演示

点击下方按钮在当前页面中测试频道播放器：

注意： 此演示使用示例频道ID。在实际使用时，请使用您自己的频道ID生成的代码。

常见问题

如何在同一页面添加多个播放器？

为每个播放器指定不同的ID：

// 创建多个播放器
const player1 = createChannelPlayer('player1');
const player2 = createChannelPlayer('player2');
const player3 = createChannelPlayer('player3');

播放器不显示怎么办？

检查频道ID是否正确
确认代码已正确粘贴到 <script> 标签内
确保在DOM加载完成后调用 createChannelPlayer() 函数
检查浏览器控制台是否有错误信息

如何自定义播放器样式？

播放器创建后，可以通过JavaScript修改其样式：

const player = createChannelPlayer('myPlayer');
player.style.borderRadius = '12px';
player.style.boxShadow = '0 8px 30px rgba(0,0,0,0.2)';
player.style.margin = '30px auto';

// 修改内部iframe样式
const iframe = player.querySelector('iframe');
iframe.style.borderRadius = '8px';