jQuery响应式HTML5视频弹窗插件 - videopopup.js
videopopup.js是一款轻量级基于jQuery的视频弹窗插件，使用它可以显示和播放HTML5视频，支持响应式播放，可在PC和移动端根据设备尺寸进行自适应调整播放弹窗窗口大小。
入门指南
插件教程
1、引入依赖
<link rel="stylesheet" type="text/css" href="css/videopopup.css" media="screen"/>
<script src="js/jquery.3.3.1.min.js"></script>
<script src="js/videopopup.js"></script>
2.HTML视频代码（核心部分）
<a href="javascript:void(0)" id="btnOpenVideo">点我播放视频</a>
<br/>
<div id="vidBox">
<div id="videCont">
<video autoplay id="videoPlayer" loop controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</div>
3.Javascript脚本初始化
$(function () {
$('#vidBox').VideoPopUp({
backgroundColor: "#17212a", //视频弹窗播放时的背景颜色
opener: "btnOpenVideo", //触发弹窗按钮ID
maxweight: "360", //视频最大宽度
pausevideo: true, //弹窗关闭时是否停止播放视频
idvideo: "videoPlayer" //视频标签ID
});
});
这样videopopup.js响应式弹窗插件播放HTML5视频示例就完成了。
the end
