Layui table 的 templet 中直接写 标签不生效，因默认开启 HTML 转义；需在列配置中设置 unresize: true 并在 templet 函数中返回未转义的完整 字符串，且确保字段名与后端一致、src 可访问。

layui table 的 templet 里直接写 <video></video> 标签不生效？

因为 layui 表格渲染时会对单元格内容做 html 转义（默认开启），<video></video> 标签会被当成纯文本显示，而不是解析成播放器。

解决方法是：在列配置中显式关闭转义，用 templet 返回原始 HTML 字符串。

• 必须设置 unresize: true 或确保列宽足够，否则视频控件可能被截断
• templet 函数返回值要包含完整 <video></video> 标签，且 src 必须是可访问的地址（注意跨域）
• 不要在 templet 中用 document.write 或动态 appendChild，Layui 渲染时机不保证 DOM 已就绪

{
  field: 'video_url',
  title: '预览',
  templet: function(d) {
    return '<video controls width="120" height="80"><source src="'%20+%20(d.video_url%20%7C%7C%20'')%20+%20'" type="video/mp4"></source></video>';
  },
  unresize: true
}

视频地址是相对路径或后端接口返回的？注意 d 数据结构

表格行数据 d 是当前行的原始 JSON 对象，字段名必须和你后端返回的 key 完全一致——比如后端返回 play_url，就不能在 templet 里写 d.video_url，否则 undefined 导致空 src，控制台报错 MediaError: Failed to load resource。

• 先用 console.log(d) 确认字段名，再拼接 src
• 如果视频需要鉴权（如带 token），确保 src 是完整 URL，例如 '/api/video?token=' + d.token
• 避免在 templet 中做异步请求（如 fetch），Layui 不会等 Promise，结果一定是空或报错

移动端点不开、自动播放失败？跟 autoplay 和浏览器策略强相关

现代浏览器（Chrome、Safari、微信内置浏览器）普遍禁止无用户交互的自动播放，尤其是带声音的视频。加 autoplay muted 有可能成功，但不是 100%。

• 别依赖 autoplay，用户点击触发更可靠；可用 templet 渲染一个「播放」按钮，点击后再动态插入 <video></video>
• 移动端 controls 可能样式错乱，建议加内联 style="max-width:100%" 防溢出
• 某些安卓 WebView 不支持 MP4 H.265 编码，优先用 H.264 + AAC 组合

多个视频同时加载卡顿？preload 和懒加载怎么配

表格一屏渲染几十行，每行都加载视频资源，首屏卡顿、内存飙升、请求 429 都很常见。

• 默认把 preload 设为 "none"，只在用户 hover 或 click 时才设置 src 并调用 load()
• 用 data-video-src 属性存地址，templet 先渲染占位图或按钮，绑定事件再激活视频
• Layui 没有原生懒加载钩子，得自己监听 scroll 或用 IntersectionObserver 判断是否进入视口

复杂点在于：视频加载状态要和表格重绘解耦，否则翻页、排序时容易重复加载或内存泄漏——这个边界，很多人一开始根本没意识到。