Chrome/Edge 的“媒体”面板可查 HTML5 播放日志，含属性、事件、消息三视图；需提前开启 DevTools，动态媒体元素才显示，localStorage 进度非日志。
长城电脑本身不提供专属的 HTML5 播放日志功能——它只是运行 Windows 系统的硬件设备。真正能查 HTML5 视频播放日志的，是浏览器（如 Chrome、Edge）及其开发者工具里的「媒体」面板，和你用什么品牌电脑无关。
怎么在 Chrome / Edge 里打开 HTML5 媒体日志
Chrome 和 Edge（基于 Chromium）都内置了专门查看视频/音频播放行为的调试面板，叫「媒体」（Media）工具，比 console.log 更底层、更精准。
右键网页 → “检查” 或按 Ctrl+Shift+I（Windows） → 顶部工具栏切换到 “媒体” 选项卡 → 若看不到，点右上角 “⋯” → “更多工具” → “媒体”
这个面板会自动列出当前页面所有 和 元素，并提供三个关键视图：
-
属性：显示currentTime、duration、paused、buffered等实时状态 -
事件：记录play、pause、seeking、ended等触发时机 -
消息：输出解码器加载、缓冲失败、DRM 错误等底层日志（例如：Failed to load resource: net::ERR_CONNECTION_REFUSED）
⚠️ 注意：只有页面中实际存在并已初始化的媒体元素才会出现在这里；动态创建但尚未 src 赋值的 不会显示。
立即学习“前端免费学习笔记（深入）”；
为什么 console.log(video.currentTime) 不够用
单纯靠 console.log() 打点记录播放时间，容易漏掉关键异常节点，比如：
- 视频卡在 loading 状态，但
currentTime一直是 0 - 用户拖动进度条后触发
seeking，但没监听seeked，导致你以为“已跳转成功” -
canplay触发了，但play()报NotAllowedError（常见于无用户手势调用）
这些情况在「媒体」→「消息」面板里会直接标红显示，而控制台可能只报一行模糊的 warning。
实操建议：
- 在「消息」面板顶部用关键词过滤，比如输入
buffer查缓冲问题，输入error快速定位失败环节 - 切换到「时间线」面板，可直观看到播放、暂停、缓冲区填充的波形图，判断是否频繁卡顿
localStorage 记录的“播放进度”不是日志，别混淆
很多教程教用 localStorage.setItem('myVideo_progress', video.currentTime) 实现续播——这属于用户行为数据持久化，不是播放日志。
它无法告诉你：
- 视频是否真的开始解码（
canplay是否触发） -
currentTime被设为 120 后，有没有真正跳到第 2 分钟（需监听seeked） - 网络是否中断导致缓冲区清空（
progress事件停止触发）
如果你真要存日志到本地，得手动构造结构化记录：
const logEntry = {
timestamp: Date.now(),
level: 'info',
event: 'seeked',
currentTime: video.currentTime,
buffered: Array.from(video.buffered).map(r => ({ start: r.start, end: r.end }))
};
console.log(logEntry); // 再配合「媒体」面板交叉验证
安卓/iOS App 里的 H5 页面怎么查
长城电脑查不了手机 App 里的 H5 日志——但你可以把手机连到这台电脑上远程调试：
-
安卓：USB 连接 + 电脑打开
chrome://inspect/#devices→ 找到你的 App 中 WebView 页面 → 点「inspect」 - iOS：Mac 上 Safari 开启「开发」菜单 + iPhone 连 Mac + Safari「开发」→ 选设备 → 点 H5 页面
此时打开的 DevTools 就和桌面版一样，能进「媒体」面板。注意：iOS 的 Safari DevTools 对 media 面板支持较弱，部分字段（如缓冲区细节）可能为空，优先用 Chrome/Edge + 安卓方案验证。
最容易被忽略的一点：媒体日志只在 DevTools 打开后才开始捕获。如果视频已经播完了再打开面板，就看不到历史事件了——必须提前开好，或者刷新页面重放流程。
