视频播放器嵌入控制示例

如何在您的网站上使用

1. 嵌入视频播放器

<iframe id="videoIframe" src="/embed/YOUR_VIDEO_ID/?color=%2300b3ff" allowfullscreen></iframe>

2. 通过JavaScript控制播放器

// 获取iframe元素
const videoIframe = document.getElementById('videoIframe');

// 发送控制命令
function sendCommand(action, value = null) {
    const message = value !== null ? { action, value } : { action };
    videoIframe.contentWindow.postMessage(message, '*');
}

// 控制示例
sendCommand('play');                    // 播放
sendCommand('pause');                   // 暂停
sendCommand('togglePlay');              // 切换播放/暂停
sendCommand('seek', 30);                // 跳转到30秒
sendCommand('forward', 10);             // 前进10秒
sendCommand('rewind', 5);               // 后退5秒
sendCommand('volume', 0.5);             // 设置音量为50%
sendCommand('toggleMute');              // 切换静音
sendCommand('setPlaybackRate', 1.5);    // 设置播放速度为1.5倍
sendCommand('setThemeColor', '#ff0000'); // 设置主题颜色为红色

// 监听播放器事件
window.addEventListener('message', function(event) {
    if (!event.data || typeof event.data !== 'object') return;
    
    const { event: eventType, videoId, currentTime, duration } = event.data;
    
    switch(eventType) {
        case 'ready':
            console.log('播放器已准备就绪', videoId);
            break;
        case 'play':
            console.log('视频开始播放');
            break;
        case 'pause':
            console.log('视频暂停');
            break;
        case 'ended':
            console.log('视频播放结束');
            break;
        case 'timeupdate':
            console.log('当前播放时间:', currentTime, '总时长:', duration);
            // 可以用来更新自定义进度条
            break;
    }
});