ArtPlayer 字幕显示异常问题解析与解决方案

问题背景

在使用轻量级播放器 ArtPlayer 时，开发者可能会遇到字幕显示异常的问题。具体表现为字幕文件中包含的 HTML 标签（如 <i>）无法正确渲染，而是直接显示为文本形式的 HTML 实体（如 <i>）。

问题根源分析

通过技术分析发现，问题的根本原因在于字幕文件（.vtt格式）本身已经对 HTML 标签进行了转义处理。例如，原始字幕文件内容如下：

00:44.753 --> 00:50.050
<i>The starlight I've been searching for</i>

这种转义处理导致播放器无法正确识别其中的 HTML 标签，而是将其作为普通文本显示。ArtPlayer 默认的字幕处理机制无法自动识别并反转这种转义。

解决方案

针对这一问题，ArtPlayer 提供了灵活的插件机制来解决。以下是完整的解决方案实现：

function loadSubtitle({ url }) {
    return async (art) => {
        const res = await fetch(url);
        const text = await res.text();
        const textarea = document.createElement('textarea');
        textarea.innerHTML = text;
        const vtt = textarea.value;
        const blobUrl = URL.createObjectURL(new Blob([vtt]));
        const type = Artplayer.utils.getExt(url);
        art.option.subtitle.escape = false;
        art.subtitle.switch(blobUrl, { type });
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [
        loadSubtitle({
            url: '字幕文件URL'
        })
    ]
});

技术原理

1. 获取字幕内容：通过 fetch API 获取原始字幕文件内容
2. 反转义处理：利用 textarea 元素的特性，将转义的 HTML 实体还原为原始 HTML 标签
3. 创建临时资源：使用 Blob 和 URL.createObjectURL 创建临时可访问的字幕文件
4. 配置播放器：设置 escape 为 false 以允许 HTML 标签渲染
5. 切换字幕：使用 art.subtitle.switch 方法加载处理后的字幕

最佳实践建议

1. 字幕文件预处理：如果可能，建议在服务端对字幕文件进行预处理，避免客户端进行额外处理
2. 性能优化：对于大量字幕文件，可以考虑缓存处理结果
3. 安全考虑：当允许渲染 HTML 时，应注意防范 XSS 攻击，确保字幕来源可信

总结

ArtPlayer 作为一款轻量级播放器，通过灵活的插件机制为开发者提供了解决各种特殊需求的能力。对于转义过的字幕文件，开发者可以利用上述方案轻松解决问题，同时保持播放器的高性能和良好体验。理解这一解决方案不仅有助于解决当前问题，也为处理其他类似场景提供了思路。