ArtPlayer中自定义双击事件的技术实现

背景介绍

ArtPlayer是一个功能强大的HTML5视频播放器，提供了丰富的API和自定义选项。在实际使用中，开发者经常需要修改播放器的默认交互行为，其中双击事件的处理就是一个常见需求。

默认双击行为分析

ArtPlayer默认的双击事件处理逻辑如下：

1. 在桌面端：双击会触发全屏切换操作
2. 在移动端：双击会触发播放/暂停切换

这种默认行为虽然符合大多数播放器的惯例，但在某些特定场景下，开发者可能需要修改这一行为，例如实现类似YouTube的双击快进/快退功能。

自定义双击事件实现方案

ArtPlayer提供了全局配置选项来修改默认的双击行为。以下是实现自定义双击事件的关键步骤：

1. 禁用默认双击行为

首先需要禁用播放器的默认双击处理逻辑：

const art = new ArtPlayer({
    container: '.artplayer-app',
    url: 'your-video-url.mp4',
    setting: true,
    playbackRate: true,
    isMobile: false,
    fullscreen: false,
    fullscreenWeb: false,
    mutex: true,
    hotkey: true,
    autoSize: false,
    autoMini: false,
    screenshot: false,
    setting: true,
    loop: false,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    autoPlayback: true,
    airplay: true,
    pip: true,
    plugins: [],
    // 关键配置：禁用移动端双击播放行为
    mobileDbClickPlay: false,
});

2. 添加自定义双击事件监听

然后可以添加自己的双击事件处理逻辑：

art.on('dblclick', () => {
    // 实现快进5秒功能
    art.seek = art.currentTime + 5;
    
    // 如果需要显示快进提示
    art.notice.show = '+5s';
});

3. 兼容移动端处理

由于移动端和桌面端的事件处理有所不同，建议统一处理：

let lastClickTime = 0;
art.on('click', () => {
    const now = Date.now();
    if (now - lastClickTime < 300) { // 300ms内视为双击
        // 自定义双击逻辑
        art.seek = art.currentTime + 5;
        art.notice.show = '+5s';
    }
    lastClickTime = now;
});

进阶实现方案

对于更复杂的需求，可以考虑以下方案：

1. 区分左右侧双击

模仿YouTube的行为，左侧双击快退，右侧双击快进：

art.on('click', (event) => {
    const now = Date.now();
    if (now - lastClickTime < 300) {
        const rect = art.container.getBoundingClientRect();
        const clickX = event.clientX - rect.left;
        const isLeftSide = clickX < rect.width / 2;
        
        if (isLeftSide) {
            art.seek = Math.max(0, art.currentTime - 5);
            art.notice.show = '-5s';
        } else {
            art.seek = art.currentTime + 5;
            art.notice.show = '+5s';
        }
    }
    lastClickTime = now;
});

2. 添加动画效果

可以结合CSS动画增强用户体验：

.artplayer-app .art-notice {
    transition: all 0.3s ease;
    transform: scale(1.2);
    opacity: 0.8;
}

注意事项

1. 移动端和桌面端的事件处理差异较大，需要充分测试
2. 双击时间间隔阈值(300ms)可以根据实际需求调整
3. 自定义事件可能会影响播放器的其他交互，需全面测试
4. 建议保留一个设置选项让用户可以切换回默认行为

通过以上方法，开发者可以灵活地定制ArtPlayer的双击事件行为，满足各种业务场景的需求。