WebView中React组件用JavaScript实现MP4视频流播放故障排查

核心问题：Base64分片未正确解码 #

你当前直接将Base64格式的chunk传入Uint8Array，这是错误的——Uint8Array无法直接解析Base64字符串，必须先把Base64解码为二进制数据才能被MediaSource识别。

修改playback-continue事件的处理逻辑：

window.runtime.EventsOn('playback-continue', (chunk) => {
    console.log("chunk ", chunk);
    // 将Base64字符串解码为二进制数组
    const binaryStr = atob(chunk);
    const uint8Array = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        uint8Array[i] = binaryStr.charCodeAt(i);
    }
    queue.push(uint8Array);
    appendToBuffer(sourceBuffer);
});

额外排查优化点 #

• 确认分片格式为fMP4
  MediaSource API仅支持符合ISO BMFF（又称fMP4）的分片，普通MP4的字节切片无法被正确解析。需确保后端推送的是fMP4格式的流，而非普通MP4的简单分割。

• 校验MIME Codec准确性
  确认avc1.4D401F与视频实际编码一致。可通过FFmpeg命令查看视频编码信息：

ffmpeg -i video.mp4 -vcodec copy -acodec copy -f mp4 -movflags frag_keyframe+empty_moov+default_base_moof pipe:1

若编码不符，替换为实际的codec标识（如avc1.64001E）。

• 优化Buffer追加逻辑
  给appendToBuffer增加重试机制，避免因临时状态问题导致分片丢失：

function appendToBuffer(sourceBuffer) {
    if (queue.length === 0) return;
    if (sourceBuffer.updating || mediaSource.readyState !== 'open') {
        setTimeout(() => appendToBuffer(sourceBuffer), 50);
        return;
    }
    sourceBuffer.appendBuffer(queue.shift());
}

• WebView兼容性检查
  Android WebView需开启setMediaPlaybackRequiresUserGesture(false)（如需自动播放），同时确保已启用JavaScript和DOM存储权限；iOS WKWebView需确认allowsInlineMediaPlayback等相关配置正确。

内容的提问来源于stack exchange，提问作者amlwwalker