在Layui中需用DOM对象传入layer.open的content,动态设置video.src并调用load()和play(),添加playsinline属性适配iOS,关闭时pause并清空src。

在Layui中实现点击按钮后弹出包含视频播放器的模态框,需绕过Layui默认不支持内嵌<video>标签自动渲染的限制,手动注入HTML并确保播放器可交互、不被遮挡、能正常加载资源。
准备视频资源与基础弹窗结构
新建一个<div>容器,设置id="video-modal-content",内部仅写<video>标签骨架,不加controls或src——这些必须在弹窗打开时动态注入,否则Layui layer初始化时会因资源未就绪导致静音、黑屏或报错。
这一步不能省略:Layui的content参数若直接传含src的<video>字符串,部分浏览器会在layer尚未显示时提前触发预加载,造成跨域失败或404错误。
用layer.open创建无标题栏的自定义弹窗
调用layer.open,设置type: 1(页面层),title: false(隐藏标题栏),closeBtn: 1(保留右上角关闭按钮),area: ['800px', '600px'](固定宽高适配常见视频比例)。
【关键前提】必须将content设为$('#video-modal-content')[0]这样的DOM对象引用,而非字符串HTML——只有传入真实节点,后续才能用JS安全操作video元素的src、play()等方法。
动态注入视频地址并触发播放
在success回调函数中获取弹窗内的<video>元素:
第一步:const videoEl = $('#video-modal-content').find('video')[0];
第二步:videoEl.src = 'https://example.com/demo.mp4';
第三步:调用videoEl.load()强制重载元数据,再执行videoEl.play().catch(e => console.warn('自动播放被阻止', e));——现代浏览器普遍禁止无用户手势触发的自动播放,此处catch捕获是必要容错,不处理会导致控制台报错且界面卡死。
注意:若视频地址带签名或时效参数,务必在src赋值前拼接完整URL,否则load()会加载空资源。
适配移动端与关闭清理
方法一:监听弹窗关闭事件,在end回调里执行videoEl.pause(); videoEl.src = '';,防止后台继续缓冲浪费流量。
方法二:为<video>添加webkit-playsinline playsinline属性(写在初始HTML中),否则iOS Safari会在全屏模式下打开,破坏弹窗体验。
这一步操作起来很简单,直接在#video-modal-content里的<video>标签上加上这两个属性即可。



















