移动端和PC端自适应页面的视频弹窗控件小案例

时间：2023-04-02 22:37:18 HTML

因为需要在视频专题页项目中链接腾讯视频，然后在web端以弹窗的形式展示页面，弹窗需要播放视频。弹出窗口关闭时视频停止。之前查资料看到很多案例，但不是很清楚。今天经过多次尝试，终于成功了。让我分享一下。代码如下：需要使用到的引用库：jQuery，boostrap框架。HTML结构如下×模态标题

JS如下：这里的html代码引用了boostrap的模态框作为弹窗框，方便显示和隐藏弹窗而我使用iframe作为插入视频的工具，因为经过测试，在使用embed标签的时候有问题，在移动端无法识别，但是iframe显示正常，所以使用iframe。需要注意的点是：默认弹出窗口的宽高是固定的，因为需要自适应所以需要调整。这里可以使用CSS媒体查询或者JS来查询设备窗口的大小。我只是使用媒体查询：CSS如下：@mediascreenand(min-width:767px){.modal-body>iframe{width:566px;高度：400px;;}}@mediascreenand(max-width:766px){.modal-body>iframe{width:100%;高度：100%；这样CSS就可以根据设备的窗口大小调整iframe的大小。模态框居中问题的解决方法：同时boostrap的视频弹窗默认是不居中的，我们需要让它居中。所以这里用js首先检查model是否为block，即是否显示，如果不显示，直接将弹窗高度设置为0。如果显示，计算它的上空白高度，应该是整个屏幕高度的一半减去模态框高度的一半，然后将margin-top的高度设置为计算结果。居中。如何控制视频播放和停止由于iframe中插入的视频是外网视频，涉及到跨域，我们无法在本地控制视频，导致模态框被X隐藏了，但是视频还是后台播放，也就是iframe还在，这无疑会出问题。我尝试了网上给出的各种答案，但都没有用。后来在网上看到把iframe的src属性的值设置为空的想法。受此启发，我想出了一个解决方案；代码已经在上面的JS中贴出来了，这里就不贴了。先说一下解决方法：首先为模态框注册点击事件，然后在点击事件的回调函数中判断模态框是否显示。如果显示了，就给iframe的src属性赋一个空值，这样视频没有地址就播放不了；如果显示模态框，则将正确的视频地址赋值给iframe的src属性，这样视频就可以正常播放了。这就涉及到为什么要给模态框注册点击事件了，因为a标签的data-target属性的值就是模态框的id，所以给模态框注册点击事件就相当于注册了点击事件对于a标签，a标签是预览图的父元素，所以点击a标签会触发模态框的点击事件。至此，需求已经解决。点击预览图播放视频，点击X，模态框消失视频停止，点击视频区域外，模态框消失视频停止。点击视频内的区域，内置播放器会暂停。

上一篇：10个最佳CSS动画库

下一篇：CSS盒模型及相关知识点

移动端和PC端自适应页面的视频弹窗控件小案例相关文章