如何通过外部自定义工具栏设置videojs播放器音量，现有代码不生效求解决

• Video.js的volume是方法而非可直接赋值的属性，直接对vp.volume赋值不会触发播放器内部的音量更新逻辑，必须通过传参调用的方式修改音量。
• sessionStorage.getItem()返回的是字符串类型的值，而volume()方法要求传入0~1区间的数字类型参数，直接传入字符串会导致参数不匹配，设置失效。
• 额外注意：浏览器的storage事件仅在同域下的其他页面修改存储内容时才会在当前页面触发，如果你的音量修改操作是在当前播放器页面执行的，当前页面不会触发这个监听事件，也就不会执行你的赋值逻辑。

核心代码修复 #

$(window).bind('storage', function(e) {
  // ...
  // 高版本Video.js直接调用videojs('id')就能拿到播放器实例，不需要额外调用.player()
  var vp = videojs('player');
  // 转成数字，同时做范围限制，避免超出0~1的合法区间
  var customVolume = parseFloat(sessionStorage.getItem('customVolume'));
  customVolume = isNaN(customVolume) ? 1 : Math.max(0, Math.min(1, customVolume));
  // 调用方法设置音量
  vp.volume(customVolume);
  // ...
})

同页面修改音量的补充处理 #

如果你的自定义工具栏和播放器在同一个页面，修改音量后不需要依赖storage事件，主动触发音量更新即可：

// 自定义工具栏音量调整的回调逻辑示例
$('.custom-volume-slider').on('change', function() {
  // 假设滑块是0~100的取值，转为播放器需要的0~1区间值
  var volume = $(this).val() / 100;
  sessionStorage.setItem('customVolume', volume);
  // 主动更新当前页面播放器音量
  videojs('player').volume(volume);
})

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