实现视频模态框功能

最新推荐文章于 2025-10-21 10:34:21 发布

原创

最新推荐文章于 2025-10-21 10:34:21 发布 · 置顶 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Boostript #模态框 #视频 #jQuery

本文介绍了如何结合Jquery和Boostript框架来创建视频模态框功能。通过设置视频的controls属性并关闭自动播放，然后搭建模态框，调整其宽度以匹配视频。接着，修改模态框的圆角样式，并为modal-content添加相应属性。通过jQuery实现了点击视频播放和暂停，退出模态框时也能自动暂停的功能。最后，讨论了在模态框隐藏后调用的方法。

运用技术

Jquery

Boostript框架的模态框

效果图

代码实现

video的搭建调用controls属性关闭自动播放

<div id="filelist">

        <video id="videodemo" class="video_link" controls="controls" width="960"  height="500" src="">

        </video>

</div>

模态框搭建--注意和视频宽度一样

<div class="modal fade" id="Vadio" role="dialog" aria-labelledby="videoPlayModal" aria-hidden="true">
    <div class="modal-dialog" style="width:960px;">
	    <div class="modal-content"&