React Native Video 组件在播放 HLS 视频时的全屏显示问题解析

问题现象

在使用 React Native Video 组件播放 HLS 格式的 m3u8 视频时，开发者遇到了视频无法正确全屏显示的问题。具体表现为：

1. 视频在纵向模式下录制（分辨率为 1080x1920）
2. 通过 AWS Elastic Media Converter 转换为 HLS m3u8 格式
3. 使用 Video 组件播放时，视频无法正确填充整个屏幕区域
4. 使用 resizeMode="contain" 时视频显示为盒子状
5. 使用 resizeMode="stretch" 时视频会被拉伸变形

技术背景

React Native Video 是一个流行的视频播放组件，支持多种视频格式和播放控制功能。HLS (HTTP Live Streaming) 是一种流行的自适应比特率流媒体协议，特别适合移动设备上的视频播放。

问题根源分析

经过深入分析，发现问题出在 Android 平台的 ExoPlayer 实现中。具体来说：

1. 当解析 HLS 视频流时，ExoPlayer 无法正确获取视频轨道的宽度和高度信息
2. 返回的格式信息中 width 和 height 都为 -1
3. 组件默认使用 pixelWidthHeightRatio 1.0 作为宽高比
4. 这导致组件无法正确计算视频的显示比例

解决方案

针对这个问题，社区提出了以下解决方案：

1. 验证视频轨道信息有效性：在更新宽高比之前，先检查视频轨道的宽度和高度是否有效
2. 条件性更新宽高比：只有当视频轨道的宽度或高度大于0时，才更新宽高比
3. 保留默认行为：对于无效的视频轨道信息，跳过宽高比更新

实现细节

在 Android 平台的实现中，修改了 updateForCurrentTrackSelections 方法的逻辑：

private void updateForCurrentTrackSelections(Tracks tracks) {
    if (tracks == null) {
        return;
    }
    TrackGroupArray groups = tracks.getGroups();

    for (int i = 0; i < groups.length; i++) {
        TrackGroup group = groups.get(i);
        if (group.getType() == C.TRACK_TYPE_VIDEO && group.length > 0) {
            Format format = group.getFormat(0);
            if (format.width > 0 || format.height > 0) {
                layout.updateAspectRatio(format);
            }
            return;
        }
    }
    updateShutterViewVisibility();
}

最佳实践建议

1. 视频编码设置：确保视频编码时包含正确的元数据信息
2. 格式验证：在上传视频前验证其元数据完整性
3. 回退机制：在客户端实现宽高比回退逻辑
4. 测试覆盖：对多种视频格式和分辨率进行充分测试

总结

React Native Video 组件在播放 HLS 视频时的全屏显示问题，主要是由于视频轨道元数据不完整导致的宽高比计算错误。通过在客户端添加有效性验证，可以优雅地解决这个问题，同时保持对其他格式视频的良好兼容性。开发者在使用视频组件时，应当注意视频源的元数据完整性，并在必要时实现适当的回退机制。