使用Parcel打包时如何通过JavaScript动态修改video标签的src路径？

问题原因 #

你当前直接通过字符串赋值给src的写法，Parcel 编译阶段无法识别这是静态资源引用，因此不会将对应视频文件打包到dist目录，运行时会出现404错误。

解决方法 #

不需要额外修改Parcel配置文件，按照以下写法即可自动触发Parcel的资源处理逻辑，视频会自动哈希重命名后输出到dist目录，路径自动适配开发/生产环境：

• 方法1：单视频固定引用，先import导入再赋值
  代码示例：

  // 顶部先导入视频资源，Parcel会自动处理打包并返回最终可访问路径
  import video1Src from './assets/video/1.mp4'
  
  const video = document.querySelector('video')
  video.src = video1Src
  

• 方法2：多视频动态切换，使用URL构造函数搭配import.meta.url（Parcel v2支持）
  如果需要根据变量动态选择不同视频，用这种写法Parcel会自动将匹配到的所有视频文件打包到dist：

  const videoId = '1' // 可替换为动态变量，比如2、3等
  const videoSrc = new URL(`./assets/video/${videoId}.mp4`, import.meta.url).href
  
  const video = document.querySelector('video')
  video.src = videoSrc
  

• 兼容Parcel v1的写法：用require导入

  video.src = require('./assets/video/1.mp4')
  

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