<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title>video</title>
<style type="text/css">
body{position:absolute;margin:1px;background-color: #000;text-align:center;
-webkit-user-select: none;
}
.videolist { position:relative; float:left; width:49%; height:auto;margin:0.5%;}
.videolist:hover{ cursor: pointer;}
.videos{ display:none; border:0px solid #000; position:fixed; left:0; top:0; z-index:999; width:100%; height:100%;background-color:#000}
.vclose {width:20px;height:20px; position:absolute;right:1px; top:1px; cursor: pointer; content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDODJGNjIwOEFDMTExRTk4NjI2OENEM0U4Q0I5NTJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDODJGNjIxOEFDMTExRTk4NjI2OENEM0U4Q0I5NTJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkM4MkY2MUU4QUMxMTFFOTg2MjY4Q0QzRThDQjk1MkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkM4MkY2MUY4QUMxMTFFOTg2MjY4Q0QzRThDQjk1MkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7+PmXBAAAB1UlEQVR42qSVPUsDQRCG7xYLiWk0kghaBoxVDjRC8guCtb1aBJHYpzFWNqkFRSwklZWVEP0BIQFNESsj2ApG8AsSQQjEd4/3YAmbXc4MPHAfe+/Mzc7OuMPh0BljLkiDLEiBBJgBfdAFHdAED0Ar4o4Rz4Ad8E6BDgX7dJCgQ+k4Bi7AvU18CuzygxpoOXZbAxsM5AwMdOJS+AC8gHMnvBXAIjgKHKji++D3n8Kqg2lwLG+EkuO5CYUdfj9LPV9cVsU2uNEszoNr4GneFcEliI48r7EYXMFy+9DtNuwW1CmkmkfHVdAbedfi5qYFy6lp+NUKoyuORF2nc51JvawUXwGPllxWGKlH4SifjTN5LlKy/OLgzSLeZpQlCpct6+WBSwjlSNvsisLPdGYy/yQL5UjbrEjhBbBlWesHLJiSuGXxJkgyz1Xee4b1svd0RZB8w8IkI5Wir8x9W1Oeqi2DJyneADnDwpKyoabyVM0vb8F+HGN30+VZV3Y9/klek55VMO8HJBsXyIBDXk9KGazL66BxyaP/ya7mTNgVv8Gd2hWlnbIfFyYQXgInpkm0x7YZdhJ9UXgQZoY2lBn6AyLKDM2FmaG66Z9Tpn+EDoLp3zBN/z8BBgCHqMeQnPS+LgAAAABJRU5ErkJggg==);}
.videolist div{width:49%;height:auto;text-align:center;font-size:12px;color:#fff;position:fixed;z-index:100;text-shadow:-1px 1px 1px #000;font-weight:bold;white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;}
</style>
</head>
<body> <div class="video"> <div class="container" style="margin-top: 0px">
<div class="videolist" vpath="https://www.jq22.com/demo/jqueryvideo201906092219/v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4"> <div class="vtit">视频一古古怪怪干活吧v吃比较可几把v嘎嘎嘎嘎嘎嘎方法干哈哈哈哈哈</div> <img src="https://www.jq22.com/demo/jqueryvideo201906092219/v1.jpg" width="100%" height="auto"> </div>
<div class="videolist" vpath="https://www.jq22.com/demo/jqueryvideo201906092219/v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4"> <div class="vtit">视频二</div><img src="https://www.jq22.com/demo/jqueryvideo201906092219/v2.jpg" width="100%" height="auto"> </div>
<div class="videolist" vpath="https://www.jq22.com/demo/jqueryvideo201906092219/v1.jpg" ipath="https://sy4.3sybf.com/20201103/lv09MQA3/index.m3u8"> <div class="vtit">视频三</div> <img src="https://www.jq22.com/demo/jqueryvideo201906092219/v1.jpg" width="100%" height="auto"> </div>
<div class="videolist" vpath="https://www.jq22.com/demo/jqueryvideo201906092219/v2.jpg" ipath="http://m.baidu.com"> <div class="vtit">百度一下</div><img src="https://www.jq22.com/demo/jqueryvideo201906092219/v2.jpg" width="100%" height="auto"> </div>
<div class="videos"></div> </div> </div>
<script>
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="1.12.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(n.isPlainObject(c)||(b=n.isArray(c)))?(b?(b=!1,f=a&&n.isArray(a)?a:[]):f=a&&n.isPlainObject(a)?a:{},g[d]=n.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray||function(a){return"array"===n.type(a)},isWindow:function(a){return null!