Layui table 的 templet 中直接写 <video> 标签不生效，因默认开启 HTML 转义；需在列配置中设置 unresize: true 并在 templet 函数中返回未转义的完整 <video> 字符串，且确保字段名与后端一致、src 可访问。
layui table 的 templet 里直接写 <video> 标签不生效？
因为 layui 表格渲染时会对单元格内容做 html 转义（默认开启），<video> 标签会被当成纯文本显示，而不是解析成播放器。
解决方法是：在列配置中显式关闭转义，用 templet 返回原始 HTML 字符串。
- 必须设置
unresize: true或确保列宽足够，否则视频控件可能被截断 -
templet函数返回值要包含完整<video>标签，且src必须是可访问的地址（注意跨域） - 不要在
templet中用document.write或动态appendChild，Layui 渲染时机不保证 DOM 已就绪
{
field: 'video_url',
title: '预览',
templet: function(d) {
return '<video controls width="120" height="80"><source src="' + (d.video_url || '') + '" type="video/mp4"></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> - 移动端
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判断是否进入视口
复杂点在于：视频加载状态要和表格重绘解耦，否则翻页、排序时容易重复加载或内存泄漏——这个边界，很多人一开始根本没意识到。
