皇冠电子游戏登录

皇冠电子游戏登录网络

您的当前位置:首页 > 皇冠电子游戏登录动态 > 网站建设学堂 >

html前端同一个页面多个视频弹窗不影响播放

2020-10-18 18:49:05   来源:皇冠电子游戏登录网络   评论:0 点击:
一个视频列表页面有个多个视频,点击链接后弹出视频,如果只是用隐藏或显示来控制弹窗的弹出和关闭,会导致关闭隐藏后的视频继续播放,从而影响下一个视频播放,下面给出一个解决方案,就是弹出时用script 插入视频脚本,关闭后清除视频脚本。




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html前端同一个页面多个视频弹窗不影响播放</title>
<script type="text/javascript" src="/myfile/js/jquery.js"></script><!--加载一个jquery.js-->
<style type="text/css">
.listimg li{ width:100%;}.listimg li i{ display:none;}#ship{position: fixed; width:100%; height:100%; background-color:rgba(76,76,76,0.88); display:table; z-index:99999; left:0px; top:0px; display:none;}#ship #sp{ width:100%; height:100%; display:table-cell; vertical-align:middle;}
#ship #sp iframe{ width:100%; height:100%;}.center{ width:50%; text-align:center; margin:0px auto;}#ship a{ position:absolute; right:20px; top:20px; display:block; color:#FFF;}</style>
</head><body>
<ul id="shipinlist" class="listimg ">
<li><a href="javascript:;" onMouseDown="opshipin('src1')">弹出视频1</a> <i id="src1">https://player.youku.com/embed/XNDg4MzE1MjQ4MA==</i></li>
<li><a href="javascript:;" onMouseDown="opshipin('src2')">弹出视频2</a> <i id="src2">https://player.youku.com/embed/XNDgyODcyMTExNg==</i></li>
<li><a href="javascript:;" onMouseDown="opshipin('src3')">弹出视频3</a> <i id="src3">https://player.youku.com/embed/XNDc3NTk3OTY1Mg==</i></li>
<p>....</p>
<li><a href="javascript:;" onMouseDown="opshipin('src10')">弹出视频10</a><i id="src10">https://player.youku.com/embed/XNDU5NjQ5NDM1Mg==</i></li>
</ul>
<div class="ship" id="ship"><div class="sp" id="sp"></div><a href="javascript:" onmousedown="closhipin()">关闭</a></div>
 <script type="text/javascript">
  function opshipin(a){ //点击弹出按钮时
  var spurl = $("#"+a).html(); //获取i标签中的视频地址
  var c = '<div class="center"><iframe id="iframe" src="'+spurl+'"   frameborder="0" allowfullscreen="true" ></iframe></div>';//把视频地址加到视频脚本里
  document.getElementById("sp").innerHTML = c; //把视频脚本插入id为sp的div中
  document.getElementById("ship").style.display = "table"; //弹出窗口 display用table是为了方便让视频上下居中
  document.getElementById("iframe").style.height=iframe.offsetWidth*0.562+"px" //控制视频宽高比例
  }
  function closhipin(){ //点击关闭按钮时
  document.getElementById("sp").innerHTML = '';//清除div中的视频脚本
  document.getElementById("ship").style.display = "none"; //隐藏弹窗
  }
window.onresize=function(){
document.getElementById("iframe").style.height=document.getElementById("iframe").scrollWidth*0.562+"px" //浏览器窗口大小变化时视频宽高比例不变
}
  </script>
</body>
</html>
 


点击这里下载视频弹窗脚本
/myupload/2020/1018/20201018072601469.rar 


 
皇冠电子游戏登录动态
网站建设学堂
网站优化学堂
网络行业皇冠电子游戏登录
皇冠电子游戏登录网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?
  • 网建
  • 优化
  • 资讯
  • 案列
  • 客服 有事点这里 有事点这里