只有一个页面的网站怎么做,app软件开发公司员工守则,北京模板建站设计,上海建筑建材业门户网站最近在做视频播放的时候#xff0c;发现用jquery的播放视频可以很好的实现我所需要的效果。在之前请把插件引用进来#xff0c;废话不多说#xff0c;代码如下#xff1a;
!DOCTYPE html
htmlheadmeta charsetutf-8meta …最近在做视频播放的时候发现用jquery的播放视频可以很好的实现我所需要的效果。在之前请把插件引用进来废话不多说代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title点击播放视频/titlelink relstylesheet href../bootstrap-3.3.7-dist/css/bootstrap.min.css /style typetext/cssbody{background-color: #0964}.videolist { position:relative; float:left; width:540px; height:300px;margin-left: 230px;}.videolist:hover{ cursor: pointer; }.videoed { width:50px; height:50px; position: absolute; left:45%; top:40%; z-index:99; border-radius:100%; }.videos{ display:none; border: 1px solid #080808; position:fixed; left:50%; top:50%; margin-left:-320px; margin-top:-210px; z-index:100; width:640px; height:360px; }.vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }.con{height: 430px; width: 1000px;margin: 0 auto;}.masklayer{position: fixed;display: none;width: 100%;height: 1000px;top: 0px;left: 0px;background-color: rgba(0, 0, 0, 0.8);z-index: 1000;-webkit-user-select: none;-ms-user-select: none;}/style/head bodydiv classvideodiv classcon stylemargin-top: 100pxdiv classvideolist vpath../img/圖片2.png ipathhttps://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4img src../img/圖片2.png width540px height300px /!--背景图片--img src../img/播放Icon.png classvideoed/!--播放按钮 --/divdiv classmasklayer!--遮罩层--div classvideos/div!--存放视频--/div/div/divscript src../js/jquery.min.js/scriptscript$(.videolist).each(function(){ //遍历视频列表$(this).click(function(){ //视频被点击后执行var img $(this).attr(vpath);//获取视频预览图var video $(this).attr(ipath);//获取视频路径$(.videos).html(video id\video\ posterimg stylewidth: 640px srcvideo preload\auto\ controls\controls\ autoplay\autoplay\/videoimg onClick\close1()\ class\vclose\ src\../img/gb.png\ width\25\ height\25\/);$(.videos).show();//视频窗口弹出$(.masklayer).show(); //遮罩层弹出$(body).css(overflow, hidden); //禁止滚动winHeight document.body.clientHeight;$(.masklayer).height(winHeight 5000 px); });});function close1(){var v document.getElementById(video);//获取视频节点$(.videos).hide();//点击关闭$(.masklayer).hide();//遮罩层隐藏v.pause();//停止$(.videos).html();}/script/body
/html实现的效果如下 点击播放按钮之后弹出视频播放窗口并且显示遮罩层
