弹窗视频播放
多个弹窗视频播放腾讯视频
<html lang="zh-CN">
<head>
<meta charset="gbk" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />
<title>title>
<script>
//屏幕适应
(function (win, doc) {if (!win.addEventListener) return;var html = document.documentElement;function setFont() {var html = document.documentElement;var k = 640;html.style.fontSize = html.clientWidth / k * 100 + "px";}setFont();setTimeout(function () {setFont();}, 300);doc.addEventListener('DOMContentLoaded', setFont, false);win.addEventListener('resize', setFont, false);win.addEventListener('load', setFont, false);
})(window, document);
script>
<style>
/* reset */
body,div,p,ul,li,table,tbody,tr,td,textarea,form,input,h1,h2,h3,h4,h5,dl,dt,dd,img,iframe,header,nav,section,article,footer,figure,figcaption,menu{margin:0;padding:0;list-style:none;}
body{-webkit-text-size-adjust:none; font-size: 0.24rem;}
header,nav,section,article,footer,figure,figcaption{display:block;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}
ol,ul{margin:0;padding:0;}
fieldset{border:none;margin:0;padding:0;}
a,li,ul,[onclick]{-webkit-tap-highlight-color:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
table{border-collapse:collapse;border-spacing:0;}
em,strong{font-weight:normal;font-style:normal;}
a {text-decoration:none;}
.hide {display:block;width:0;height:0;overflow:hidden;}
.c:before,.c:after {content:"";display:table;}
.c:after {clear:both;}
.fl {float:left;}
.fr {float:right;}
.pr {position:relative;}
.pa {position:absolute;}
.db {display:block;text-indent:-999em;}
body,html{background-color: #066866;}
header,footer {width:100%;margin:0 auto;}
footer{color:#8a6e68;background-color:#100d0c;padding:0.2rem 0;font-size:0.2rem;text-align:center;}/*横竖版提示*/
.w_pop{position:fixed;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,1);z-index:9999;display: none;}
.w_pop_img{width:1.8rem;height:2.73rem;background: url(ossweb-img/scape.png) no-repeat center center;background-size: 1.8rem 2.73rem;position: absolute;left: 50%;margin-left:-0.9rem;top: 50%;margin-top: -1.56rem;animation: rotateA 1.5s ease infinite alternate;}@keyframes rotateA{0%{transform: rotate(-90deg);}30%{transform: rotate(-90deg);}70%{transform: rotate(0);}100%{transform: rotate(0);}}@media screen and (orientation:landscape){.w_pop{ display: block;}}
.w_tips{width:100%;height:1.0rem;font-size: 0.18rem;color: #fff;text-align: center;position: absolute;left:0;top:50%;margin-top: 1.2rem;}/*弹窗视频*/
.act_pop_video{width:100%;height:5rem;background:#333;position:relative;display:none;}
.act_pop .act_pop_close{width:.4rem;height:.4rem;right:0;top:-.4rem;font-size: .4rem;text-align: center;line-height: 0.4rem;position:absolute;z-index:999;color: #fff;background-color: #c9984a;}
.apv_video_wrap{width:100%;height:100%;overflow:hidden}/*main*/style>
head>
<body>
<div class="w_pop"><div class="w_pop_img">div><p class="w_tips">为了更好的体验，请将手机/平板竖起p>
div>
<div class="wrap"><a class="video-ico" href="javascript:popVideo('z3101wn92sq');" ontouchend="PTTSendClick('btn','playbtn','kv视频')"><i class="sp">i>a>
div>
<div class="act_pop act_pop_video" id="pop_video"><a href="javascript:hideVideo();" class="com act_pop_close">×a><div class="apv_video_wrap" id="video_div">这里放视频div>
div>
<script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js">script>
<script src="//game.gtimg.cn/images/js/2018foot/foot.js">script>
<script src="//vm.gtimg.cn/tencentvideo/txp/js/txplayer.js">script>
<script>//遮罩
function TGDialogS(e){// 利用milo库引入dialog组件need("biz.dialog",function(Dialog){Dialog.show({id:e,bgcolor:'#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"opacity:70 //弹出“遮罩”的透明度，格式为｛10-100｝，可选});});
}
function closeDialog(){// 利用milo库引入dialog组件need("biz.dialog",function(Dialog){Dialog.hide();});
}// 视频
function playVideo(vid) {var player = new Txplayer({containerId: 'video_div',vid: vid,width: '100%',height: '100%',autoplay: true});}function popVideo(vid) {TGDialogS('pop_video');playVideo(vid);}function hideVideo() {$('#video_div').html("");closeDialog();};
script>
<script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js">script>
<script>
//此段代码不能放到外链JS中，
var setSite={ //设置网站属性 siteType:"a20160711xxx", //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxxpageType:"index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)pageName:"首页", //必填项:页面中文名 project:"other", //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;osact:0 //选填项:默认是0。osact=0表示非官网专题；osact=pc表示pc官网/pc官网专题；osact=m表示移动官网/移动官网专题；osact=ingame表示微社区/微社区专题
};
if(typeof(pgvMain)=='function')pgvMain();//千万不能忘记！
script>
body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！