详情页的视频突然播不了，F12 里 video 的 src 是 [object Object] mp4，Network 面板一个请求都没发。昨天还好好的，前端只改了一行取值。

这个字符串怎么来的

JavaScript 里对象转字符串会调用 toString，普通对象返回 [object Object]。任何字符串拼接、模板字符串、setAttribute 都会触发。常见写法 video.src = res.data，而 res.data 是 {url: '...', cover: '...'}。加个 .mp4 后缀，就变成 [object Object] mp4。

四种常见来源

  • 接口返回嵌套对象，只取了外层。
  • localStorage 里存的是 JSON 字符串，parse 之后没取字段。
  • new URL() 对象直接赋值，忘了 .href。
  • 上传组件回调给的是文件对象，不是地址。

怎么快速定位

在赋值前 console.log 打印，展开看类型。typeof 是 object 就别直接拼。用 JSON.stringify 打出来能看到结构。Vue 模板里写 :src='item.video'，item.video 是对象一样会这样，先 computed 出一个字符串。

const src = typeof data === 'string' ? data : data.url; video.src = src;

修完之后

拿到地址还要确认协议，http 页面里的 https 视频可能被拦。地址带空格或中文，encodeURI 一下。真机上报错，看服务端返回的 Content-Type 是不是 video/mp4，类型不对浏览器也不播。缓存里的旧值记得清，localStorage 改结构后老数据还在。

看到 [object Object]，别急着改播放器，先回头看一眼数据是怎么取的。