-极四维博客

jQuery点击按钮弹出窗口播放视频

jQuery点击按钮弹出窗口播放视频。点击图片区域或者按钮即可弹出一个窗口，然后在窗口进行视频播放。可以将class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4"加在按钮或a标签上实现任意元素点击播放。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点击播放视频</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body { 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> <body> <div class="video"> <div class="con" style="margin-top: 100px"> <div class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4"> <img src="./img/Estorage.png" width="540px" height="300px" />  <img src="./img/circle.png" class="videoed" />  </div> <div class="masklayer">  <div class="videos"></div>  </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> $('.videolist').each(function() { //遍历视频列表 $(this).click(function() { //视频被点击后执行 var img = $(this).attr('vpath'); //获取视频预览图 var video = $(this).attr('ipath'); //获取视频路径 $('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 640px' src='" + video + "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"./img/close.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(); $('body').css('overflow', 'auto'); } </script> </body></html>

2021/06/09 09:54 702 0

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

jQuery点击按钮弹出窗口播放视频

搜索

控制面板

最新留言

文章归档