语言切换时如何加载不同资源？独立文件中的video widget如何随语言切换更换视频

方案1：原生JS场景（无框架依赖） #

使用全局自定义事件实现跨文件通信，不需要额外引入依赖：

• 首先在语言切换器的逻辑中，切换完成后触发全局自定义事件，传递当前选中的语言标识

// 语言切换器逻辑文件
function switchLanguage(newLang) {
  // 原有处理语言切换的业务逻辑（更新文案、存储语言标识等）
  // 触发全局自定义事件
  const langChangeEvent = new CustomEvent('languageChanged', { detail: newLang });
  window.dispatchEvent(langChangeEvent);
}

• 在独立的video widget文件中监听全局事件，收到事件后替换视频源

// 独立video组件文件
// 提前配置各语言对应的视频资源地址
const videoSrcMap = {
  'zh-CN': '你的中文视频地址',
  'en-US': '你的英文视频地址',
  'ko-KR': '你的韩文视频地址'
}
const videoElement = document.querySelector('#你的视频元素ID');

// 监听语言切换事件
window.addEventListener('languageChanged', (event) => {
  const currentLang = event.detail;
  if (videoSrcMap[currentLang]) {
    videoElement.src = videoSrcMap[currentLang];
    // 必须调用load方法让新的视频地址生效
    videoElement.load();
    // 如果需要切换后自动播放可添加 videoElement.play()
  }
})

// 页面初始化时读取当前语言加载对应视频
document.addEventListener('DOMContentLoaded', () => {
  // 示例从localStorage读取初始语言，可根据你的实际存储逻辑调整
  const initLang = localStorage.getItem('currentLang') || 'zh-CN';
  videoElement.src = videoSrcMap[initLang];
  videoElement.load();
})

方案2：框架场景（Vue/React为例） #

如果是使用前端框架开发，优先使用框架自带的全局状态/事件机制：

Vue场景 #

• Vue2可使用全局事件总线Vue.prototype.$bus，或者Vuex存储全局语言状态
• Vue3可使用mitt事件库，或者Pinia存储全局语言状态
• 语言切换时更新全局状态或者触发总线事件，video组件内通过watch监听状态变化、或者监听总线事件触发视频源替换

React场景 #

• 使用Context或者Redux等全局状态管理工具存储当前语言
• 语言切换时更新全局状态，video组件内通过useContext/useSelector拿到语言状态，在useEffect中监听语言变化，触发视频源替换

注意事项 #

• 如果视频体积较大，可以提前做资源预加载处理，减少切换时的等待时间
• 如果需要保留切换前的播放进度，可以在替换视频源前记录videoElement.currentTime，视频加载完成后再把进度赋值回去

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