使用Video.js与videojs-contrib-dash手动设置视频分辨率失败求助

问题原因分析 #

1. 插件加载顺序错误：videojs-contrib-quality-levels 需要在 videojs-contrib-dash 之前加载，否则Dash插件无法将MPD中的分辨率等级注入到质量等级插件中。
2. 过早调用qualityLevels()：MPD Manifest是异步加载的，初始化播放器后立即调用 player.qualityLevels() 会因为Manifest未加载完成而返回空数组。
3. 错误操作私有属性：直接修改 selectedIndex_ 是操作内部私有属性，Video.js不会响应这种修改，必须使用官方暴露的API进行控制。

解决方案步骤 #

1. 确保脚本加载顺序

<script src="video.js"></script>
<script src="videojs-contrib-quality-levels.min.js"></script>
<script src="videojs-contrib-dash.min.js"></script>

2. 等待Manifest加载完成后获取质量等级

通过监听 manifestLoaded 事件，确保MPD解析完成后再操作质量等级：

const player = videojs('your-video-element-id');

player.ready(() => {
  player.src({
    src: 'your-drm-protected-mpd-url',
    type: 'application/dash+xml',
    keySystems: {
      // 替换为你的DRM配置
      'com.widevine.alpha': {
        licenseUrl: 'your-widevine-license-url'
      }
    }
  });

  // 等待Manifest加载完成
  player.on('manifestLoaded', () => {
    const qualityLevels = player.qualityLevels();
    
    // 验证是否获取到分辨率等级
    console.log('Available quality levels:', qualityLevels);
    
    // 示例：手动切换到720p（索引1，假设第二个等级是720p）
    if (qualityLevels.length > 1) {
      // 禁用所有其他等级，强制使用目标等级
      qualityLevels.forEach((level, index) => {
        level.enabled = (index === 1);
      });
      // 触发变更事件，通知ABR切换
      qualityLevels.trigger('change');
    }

    // 监听等级变更，确认切换结果
    qualityLevels.on('change', () => {
      console.log('Current selected level index:', qualityLevels.selectedIndex);
    });
  });
});

3. 可选：添加自定义分辨率选择UI

如果需要让用户手动选择，可以基于获取到的qualityLevels生成下拉菜单，绑定切换逻辑：

// 在manifestLoaded事件内添加
const select = document.createElement('select');
qualityLevels.forEach((level, index) => {
  const option = document.createElement('option');
  option.value = index;
  option.textContent = `${level.height}p`; // 假设level包含height属性
  select.appendChild(option);
});

select.addEventListener('change', (e) => {
  const targetIndex = parseInt(e.target.value);
  qualityLevels.forEach((level, index) => {
    level.enabled = (index === targetIndex);
  });
  qualityLevels.trigger('change');
});

// 将选择器添加到页面
player.el().appendChild(select);

关键注意事项 #

• 无需手动调用 addQualityLevel：videojs-contrib-dash 会自动将MPD中的Representation映射为质量等级，只要插件加载顺序正确且Manifest解析完成。
• DRM环境下兼容性：只要ABR功能正常，说明DRM配置正确，手动切换分辨率无需额外修改DRM参数。

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