点击弹出窗口，在窗口中播放视频文…

最新推荐文章于 2022-10-29 17:03:21 发布
最新推荐文章于 2022-10-29 17:03:21 发布
阅读量5.9k 收藏 3
点赞数
分类专栏： JS技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibo0668/article/details/51566223
版权

<!--视频弹出样式开始-->
<LINK rel=stylesheet type=text/css href="js/lightwindow.css">
<SCRIPT language=JavaScript type=text/javascript src="js/4.js"></SCRIPT>
<!--视频弹出样式结束-->

<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="images/maincontentbgc1050.png" style="padding-left:26px; padding-right:26px"><input name="image" type="image" οnmοusedοwn="MyWin.Create('no','尚德机构名师班','[pg]http://static.youku.com/v/swf/qplayer.swf?VideoIDS=XMjQ0MTcwODA4=&amp;isAutoPlay=true&amp;isShowRelatedVideo=false&amp;embedid=-&amp;showAd=0','800','500');" src="images/0406-6.jpg" width="998" height="341" /></td>
  </tr>
</table>

 

 

 

4.js

 

<!---shipin--->
var MyWin = new Win();
var imgfile = "http://bj.sunland.org.cn/templet/default/sf6/images/";//设置图片路径，相对或绝对都行
var imgname=new Array();
var img = new Array();
//预先加载图片
imgname[0] = imgfile+"clo.gif";
imgname[1] = imgfile+"b1.png";
imgname[2] = imgfile+"l1.png";
imgname[3] = imgfile+"l2.png";
imgname[4] = imgfile+"r1.png";
imgname[5] = imgfile+"r2.png";
imgname[6] = imgfile+"t1.png";
imgname[7] = imgfile+"t2.png";
imgname[8] = imgfile+"t3.png";
//预读图片
for (i=0;i<=imgname.length-1;i++)
{
   img[i] = new Image();
   img[i].src = imgname[i];
}
var zIndex = 0;
var Winid  = 0;
var Ie = /msie/i.test(navigator.userAgent);
function $(Id){return(document.getElementByIdx_x(Id))}
function Win()
{
 this.Create = function(mask,title, wbody, w, h, l, t)
 {
  Winid++;
  mask = mask;
  title = title || "尚德机构_老师";
  wbody = wbody || "<p align='center'>正在载入…</p>";
  w = w || 850;
  h = h || 300;
  cw = document.documentElement.clientWidth;
  ch = document.documentElement.clientHeight;
  sw = document.documentElement.scrollWidth;
  sh = document.documentElement.scrollHeight;
        st = (document.documentElement.scrollTop || document.body.scrollTop);
  if (w > cw)
  ww = 0;
  else
  ww = (cw - w)/2;
  if (h > ch)
  hh = 0;
  else
  hh = (st + (ch - h)/2);
  l = l || ww;
  t = t || hh;
        if (mask != "no"){
    var ndiv = document.createElement_x("DIV");
    ndiv.setAttribute("id", "ndiv"+ Winid);
    ndiv.style.cssText = "width:"+ sw +"px;height:"+ sh +"px;left:0px;top:0px;position:absolute;overflow:hidden;background:#fff;filter:alpha(opacity=20); opacity:0.2;-moz-opacity:0.2;";
    document.body.appendChild(ndiv);
    if (Ie)
    {
    var niframe = document.createElement_x("iframe");
    niframe.style.width = sw;
    niframe.style.height = sh;
          niframe.style.top = "0px";
          niframe.style.left = "0px";
          niframe.style.visibility = "inherit";
          niframe.style.filter = "alpha(opacity=0)";
          niframe.style.position = "absolute";
          niframe.style.zIndex = -1;
    ndiv.insertAdjacentElement("afterBegin",niframe);
    }
        }
  var mywin = document.createElement_x("DIV");
  mywin.setAttribute("id", "win"+ Winid);
  mywin.style.cssText = "width:"+ w +"px;height:"+ h +"px;left:0px;top:0px;position:absolute;overflow:hidden;padding:0px;font-family:Arial, 微软雅黑";
  mywin.style.zIndex = ++zIndex;
  document.body.appendChild(mywin);
  var mytie = document.createElement_x("DIV");
  var myboy = document.createElement_x("DIV");
  var mybom = document.createElement_x("DIV");
  mytie.style.cssText = "overflow:hidden;height:30px;font-weight:bold;font-size:14px;width:100%";
  myboy.style.cssText = "overflow:hidden;width:100%";
  mybom.style.cssText = "overflow:hidden;height:30px;width:100%";
  mywin.appendChild(mytie);
  mywin.appendChild(myboy);
  mywin.appendChild(mybom);
  var wintag = [[mytie, 30, 15, "t1"], [mytie, 30, w-30, "t2"], [mytie, 30, 15, "t3"], [myboy, h-45, 15, "l1"], [myboy, h-47, w-32], [myboy, h-45, 15, "r1"], [mybom, 15, 15, "l2"], [mybom, 15, w-30, "b1"], [mybom, 15, 15, "r2"]];
  for (var i = 0; i < 9; i++)
  {
   var temp = document.createElement_x("DIV");
   temp.setAttribute("Fid", "win"+ Winid);
   wintag[i][0].appendChild(temp);
      if (wintag[i][3])
   {
    temp.style.cssText = "float:left;height:"+ wintag[i][1] +"px;width:"+ wintag[i][2] +"px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+imgfile+""+ wintag[i][3] +".png', sizingMethod='scale');background:url('"+imgfile+""+ wintag[i][3] +".png') !important;background:;";
   }
   else
   {
    temp.style.cssText = "float:left;filter:alpha(Opacity=95,style=0);opacity:0.95;height:"+ wintag[i][1] +"px;width:"+ wintag[i][2] +"px;background:#f7f7f7;border:1px solid #666;overflow:hidden;padding:0px";
   }
  }
  mytie.childNodes[1].innerHTML = "<div style=\"position:absolute;overflow:hidden;height:15px;top:12px;padding-left:4px;padding-right:4px;\"></div><div style=\"position:absolute;background:url('"+imgfile+"clo.gif');overflow:hidden;width:43px;height:17px;top:7px !important;right:15px\" title=\"关闭窗口\" οnclick=\"MyWin.Close('win"+ Winid +"',10); MyWin.ndiv('ndiv"+ Winid +"',10);\"></div>";
  this.Title("win"+ Winid, title);
  this.Body("win"+ Winid, wbody);
  this.Move_e("win"+ Winid, l, t, 0, 0);
  return(mywin);
 }
 this.Title = function(Id, title)
 {
     if (Id == null) return;
     var o = $(Id);
     if (!o) return;
     o.childNodes[0].childNodes[1].childNodes[0].innerHTML = title;
 }
 this.Body = function(Id, wbody)
 {
     if (Id == null) return;
     var o = $(Id);
        if (!o) return;
        if (wbody.slice(0, 4) == "[pg]")
            o.childNodes[1].childNodes[1].innerHTML = "<iframe οnfοcus=\"MyWin.Show('"+ Id +"',this)\" src='"+ wbody.slice(4) +"' frameBorder='0' marginHeight='0' marginWidth='0' scrolling='no' width='100%' height='100%'></iframe>";
        else
            o.childNodes[1].childNodes[1].innerHTML = wbody;
 }
 this.Show = function(Id)
    {
     if (Id == null) return;
     var o = $(Id);
        if (!o) return;
     o.style.zIndex = ++zIndex;
    }
    this.Move_e = function(Id, l , t, ll, tt)
    {
     if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
     var o = $(Id);
     if (!o) return;
      o.style.left = l +"px";
      o.style.top = t +"px";
     window["ct"+ Id] = window.setTimeout("MyWin.Move_e('"+ Id +"', "+ l +" , "+ t +", "+ ll +", "+ tt +")", 1);
    }
    this.Close = function(Id, Opacity)
    {
     if (typeof(window["et"+ Id]) != "undefined") clearTimeout(window["et"+ Id]);
     var o = $(Id);
     if (!o) return;
     if (Opacity == 10) o.childNodes[0].childNodes[1].innerHTML = "";
     if (Ie)
     {
      o.style.filter = "alpha(opacity="+ Opacity +",style=0)";
     }
     else
     {
      o.style.opacity = Opacity / 10;
     }
     if (Opacity > 20)
      Opacity -= 10;
     else
      Opacity--;
     if (Opacity <= 0)
     {
         if (o.getElementsByTagName_r("IFRAME").length != 0)
         {
             o.getElementsByTagName_r("IFRAME").src = "about:blank";
         }
         o.innerHTML = "";
      document.body.removeChild(o);
      return;
     }
     window["et"+ Id] = window.setTimeout("MyWin.Close('"+ Id +"', "+ Opacity +")", 1);
    }
    this.ndiv = function(Id, Opacity)
    {
     var o = $(Id);
     if (!o) return;
     o.innerHTML = "";
  document.body.removeChild(o);
  return;
    }
}
<!--shipingend--->

 

 

 

lightwindow.css

 

#lightwindow_overlay {
 Z-INDEX: 500; POSITION: absolute; WIDTH: 100%; DISPLAY: none; HEIGHT: 100px; VISIBILITY: hidden; TOP: 0px; LEFT: 0px
}
#lightwindow {
 Z-INDEX: 999; POSITION: absolute; LINE-HEIGHT: 0px; DISPLAY: none; VISIBILITY: hidden
}
#lightwindow_container {
 POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: none; VISIBILITY: hidden; PADDING-TOP: 0px
}
* HTML #lightwindow_container {
 OVERFLOW: hidden
}
#lightwindow_contents {
 Z-INDEX: 0; BORDER-BOTTOM: #ffffff 10px solid; POSITION: relative; BORDER-LEFT: #ffffff 10px solid; BACKGROUND-COLOR: #ffffff; OVERFLOW: hidden; BORDER-TOP: #ffffff 10px solid; BORDER-RIGHT: #ffffff 10px solid
}
#lightwindow_loading {
 Z-INDEX: 9999; POSITION: absolute; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #f0f0f0; PADDING-LEFT: 10px; WIDTH: 100%; PADDING-RIGHT: 10px; HEIGHT: 100%; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
#lightwindow_loading_shim {
 POSITION: absolute; WIDTH: 100%; DISPLAY: none; HEIGHT: 100%; TOP: 0px; LEFT: 0px
}
#lightwindow_loading SPAN {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 32px; PADDING-LEFT: 0px; PADDING-RIGHT: 10px; FLOAT: left; COLOR: #444444; FONT-SIZE: 12px; PADDING-TOP: 0px
}
#lightwindow_loading SPAN A {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION: none
}
#lightwindow_loading SPAN A:link {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION: none
}
#lightwindow_loading SPAN A:visited {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION: none
}
#lightwindow_loading SPAN A:hover {
 TEXT-DECORATION: underline
}
#lightwindow_loading SPAN A:active {
 TEXT-DECORATION: underline
}
#lightwindow_loading IMG {
 MARGIN: 0px 10px 0px 0px; FLOAT: left
}
#lightwindow_navigation {
 POSITION: absolute; DISPLAY: none; TOP: 0px; LEFT: 0px
}
#lightwindow_navigation_shim {
 POSITION: absolute; WIDTH: 100%; DISPLAY: none; HEIGHT: 100%; TOP: 0px; LEFT: 0px
}
#lightwindow_navigation A {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:link {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:visited {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:hover {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:active {
 OUTLINE-STYLE: none
}
#lightwindow_previous {
 WIDTH: 49%; DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; HEIGHT: 100%
}
#lightwindow_next {
 WIDTH: 49%; DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; HEIGHT: 100%
}
#lightwindow_previous {
 FLOAT: left; LEFT: 0px
}
#lightwindow_next {
 FLOAT: right; RIGHT: 0px
}
#lightwindow_previous:hover {
 BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%
}
#lightwindow_previous:active {
 BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%
}
#lightwindow_next:hover {
 BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%
}
#lightwindow_next:active {
 BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%
}
#lightwindow_previous_title {
 DISPLAY: none
}
#lightwindow_next_title {
 DISPLAY: none
}
#lightwindow_galleries {
 Z-INDEX: 50; POSITION: absolute; MARGIN: 0px 0px 0px 10px; WIDTH: 100%; BOTTOM: 0px; DISPLAY: none; OVERFLOW: hidden; LEFT: 0px
}
#lightwindow_galleries_tab_container {
 WIDTH: 100%; HEIGHT: 0px; OVERFLOW: hidden
}
A#lightwindow_galleries_tab {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block; BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right; HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A#lightwindow_galleries_tab:link {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block; BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right; HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A#lightwindow_galleries_tab:visited {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block; BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right; HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
* HTML A#lightwindow_galleries_tab {
 FILTER: alpha(opacity=70); BACKGROUND: #000000; opacity: .70
}
* HTML A#lightwindow_galleries_tab:link {
 FILTER: alpha(opacity=70); BACKGROUND: #000000; opacity: .70
}
* HTML A#lightwindow_galleries_tab:visited {
 FILTER: alpha(opacity=70); BACKGROUND: #000000; opacity: .70
}
A#lightwindow_galleries_tab:hover {
 COLOR: #ffffbe
}
A#lightwindow_galleries_tab:active {
 COLOR: #ffffbe
}
#lightwindow_galleries_tab_span {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 7px; WIDTH: 63px; PADDING-RIGHT: 7px; DISPLAY: block; HEIGHT: 20px; PADDING-TOP: 0px
}
#lightwindow_galleries_tab .up {
 BACKGROUND: url(../images/arrow-up.gif) no-repeat 60px 5px
}
#lightwindow_galleries_tab .down {
 BACKGROUND: url(../images/arrow-down.gif) no-repeat 60px 6px
}
#lightwindow_galleries_list {
 BACKGROUND: url(../images/black-70.png) 0px 0px; HEIGHT: 0px; OVERFLOW: hidden
}
* HTML #lightwindow_galleries_list {
 FILTER: alpha(opacity=70); BACKGROUND: #000000; opacity: .70
}
.lightwindow_galleries_list {
 PADDING-BOTTOM: 10px; MARGIN: 0px 0px 10px; PADDING-LEFT: 10px; WIDTH: 200px; PADDING-RIGHT: 10px; FLOAT: left; PADDING-TOP: 10px
}
.lightwindow_galleries_list H1 {
 PADDING-BOTTOM: 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #09f; FONT-SIZE: 16px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 10px
}
.lightwindow_galleries_list LI {
 LIST-STYLE-TYPE: none; MARGIN: 5px 0px
}
.lightwindow_galleries_list A {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px; PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR: #ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:link {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px; PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR: #ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:visited {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px; PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR: #ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:hover {
 BORDER-LEFT: #ffffbe 3px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 7px; PADDING-RIGHT: 0px; BACKGROUND: #000000; COLOR: #ffffbe; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:active {
 BORDER-LEFT: #ffffbe 3px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 7px; PADDING-RIGHT: 0px; BACKGROUND: #000000; COLOR: #ffffbe; PADDING-TOP: 0px
}
#lightwindow_data {
 POSITION: absolute
}
#lightwindow_data_slide {
 POSITION: relative
}
#lightwindow_data_slide_inner {
 PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
#lightwindow_data_caption {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #666666; CLEAR: both; PADDING-TOP: 10px
}
#lightwindow_data_details {
 PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #f0f0f0; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 20px; PADDING-TOP: 0px
}
#lightwindow_data_author_container {
 TEXT-ALIGN: right; LINE-HEIGHT: 20px; FONT-STYLE: italic; WIDTH: 40%; FLOAT: right; COLOR: #666666; FONT-SIZE: 10px; OVERFLOW: hidden
}
#lightwindow_data_gallery_container {
 TEXT-ALIGN: left; LINE-HEIGHT: 20px; WIDTH: 40%; FLOAT: left; COLOR: #666666; FONT-SIZE: 10px; OVERFLOW: hidden
}
#lightwindow_title_bar {
 HEIGHT: 25px; OVERFLOW: hidden
}
#lightwindow_title_bar_title {
 TEXT-ALIGN: left; LINE-HEIGHT: 25px; FLOAT: left; COLOR: #ffffbe; FONT-SIZE: 14px
}
A#lightwindow_title_bar_close_link {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP: 0px
}
A#lightwindow_title_bar_close_link:link {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP: 0px
}
A#lightwindow_title_bar_close_link:visited {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP: 0px
}
A#lightwindow_title_bar_close_link:hover {
 COLOR: #ffffff
}
A#lightwindow_title_bar_close_link:active {
 COLOR: #ffffff
}
#lightwindow P {
 PADDING-RIGHT: 10px; COLOR: #000000
}

 

我是高手高手高高手
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态调用弹窗来实现视频的播放
ssw09141324的专栏
09-09 1682
在有些情况下，我们需要根据不同的情况来绑定不同的视频，然后用户点击后进行弹窗播放，下面通过两个页面来实现动态弹窗播放视频的功能。 1.视频播放页面(videoPlay.html) <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>Replay Video</title> .
js点击弹框优酷视频，并控制视频播放和暂停及重新载入的方法
美好的未来在于把握今天
01-11 5544
前言 今天偶尔看了下有关网页中的视频播放窗口的制作，也是带着浓烈的兴趣去学的，到底是兴趣是最好的老师，还是有很大的收获，接下来先摆上我的效果图： 接下来就是代码： <img src="http://www.wymp4.net/uploadfiles/20180103/s_2017113009100612.jpg" width="193
js显示日期和时间
flynetcn的专栏
02-26 2864
1、 dayName = new Array("", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday") monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "
前端实现点击弹出视频展示模块
罗小文
03-27 2284
最终效果 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>点击按钮展示
简单点击图片弹出video视频弹窗功能
qq_44760912的博客
11-18 6487
毕设篇：实现旅游网中的景点视频模块 使用语言及框架： HTML+JS+CSS Vue.js+Element的本地引入 阿里巴巴矢量图标库本地引入 这里为了简化重复代码，我们使用vue的v-for来帮助我们遍历数组或对象，使用v-bind来实现数据的动态绑定，使用v-on实现事件监听 模块需求： 1.点击图片或图标元素、文字可以弹出video视频弹窗（js中的onclick事件） 2.悬浮图片时，图片进行放大动画效果，并且播放按钮图标不被动画效果影响（css中的父类相对定位，子类绝对定位） 3.视频播放后或关
JS实现视频弹幕效果,不需下载资源直接用
草木疏博客
10-29 574
JS实现视频弹幕效果,不需下载资源直接用
点击视频在弹出的小窗口中播放.rar
12-04
浏览器中鼠标点击图片，立刻在浏览器中间弹出视频播放小窗口，并播放视频。下载打开index.html即可使用。
js+css点击视频在弹出的小窗口中播放
10-24
js+css点击视频在弹出的小窗口中播放
右下角播放弹出视频播放窗口
03-27
一直以来收集到自己用的一款右下角弹出播放的视频代码，附带播放器，解析的挺快的，当然你也可以让它弹出你任何想要弹出的！
如何在“时尚”弹出窗口中播放本地文件夹中的视频
04-07
您好，请参阅我的上述评论，以解决该问题。谢谢，爱德华
pop-up-videos:在标签页中打开所有视频作为弹出窗口
05-27
弹出式影片 在标签中打开所有视频作为弹出窗口，并在出现新视频时保持打开窗口。 例如，您可以拖动窗口以将其放在不同的监视器上。 当您要从网页捕获（多个）视频以在其他程序（例如使用时，它也非常有用。下载从...
js 实现右下角视频弹窗
05-30
js实现右下角视频弹窗。ie6789 火狐 谷歌测试兼容
php视频播放程序
07-14
php网站视频在点击后如何自动选择相应的播放器
视频点击弹窗（模拟框）播放
热门推荐
Andy Tools
01-09 1万+
最近又要实现一个需求，每个日期下面都对应很多的视频文件，而我们需要点击其中一个让它直接弹窗播放。因为前端基本上没有什么基础，本文只是强行实现了想要实现的功能，所以各位如果发现某些实现比较愚蠢，请不吝赐教。实现基础： 1. bootstrap 2. video标签 3. JQuery待处理的界面是这样的。 1 替换原video标签事件目标是不管点击缩率图还是播放按钮都应该是弹窗，本身视
使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）
huangfuyk.的博客
07-23 8047
有时候我们在做项目的过程中会遇到这样的需求： 使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点击后，视频暂停，图标出现。 想要的效果，例下： 我们可以配合使用video标签的pause、play、ended方法进行实现： ①因为是一个vue项目，先定义一个变量，暂且叫它videoIsPlay，默认为false，即视频暂停时状态； data () { return { videoIsPlay: false, } }, ②.
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
点击a标签弹出小窗播放视频
06-10
要实现在点击`<a>`标签弹出小窗播放视频，可以使用HTML5中的`<video>`标签和JavaScript的弹窗功能。首先需要将视频文件放置在适当的位置（比如与HTML文件同级的文件夹中），然后可以使用以下代码实现： ```html ()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值