创建网页Video上的悬浮工具条(Create toolbar overflow video on webpage)

原创 2006年06月19日 20:29:00

创建网页Video上的悬浮工具条

Create toolbar overflow video on webpage

 

前些天研究使用javascript脚本操作网页上的视频控件.因为设计的需要,想要在视频窗口上增加一个弹出式的工具条,类似于Realone的全屏按钮,当鼠标移动到视频区域时,工具条可以弹出,超过一定时间不操作,工具条可以自动隐藏.

       但是在试验过程中使用Windows MediaPlayer控件发现,好像脚本创建的div对象总是被视频窗口盖在下面.上网Google了两天,也没有发现好的解决办法,发现了一个帖子,很是有同感,但几乎让我丧失了信心:http://www.milonic.com/mfa/2004-July/004569.html

       后来决定改变方案,我要做一个ActiveX控件,将WMP封装起来,然后在我自己的ActiveX控件中实现弹出菜单,当这个想法实现一半的时候,在一次测试中,为了禁止WMP窗口的全屏,我将WMP控件属性设置为“<param name="windowlessVideo" value="1">”,在页面预览效果时,发现页面上的div竟然出现在video窗口上面了。这是我得出结论:具备全屏功能时,WMP视频窗口是一个topmost的窗口(以便他可以全屏),导致其他窗口不能在其上显示。到这里,我又放弃了封装自己的ActiveX,重新开始用javascript写控制脚本。下面的代码是一个雏形,可以在video左上角弹出一个方框按钮,点击按钮时,video开始播放或者暂停。

 

<html>

       <title>演示页面</title>

       <head>

       </head>

       <body onload="onload();">

       <table id="table1">

       <tr>

       <td>

       <div id="div1">

              <object classid=clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95 width=240 height=160 ID="Object1" VIEWASTEXT>

                     <param name="Mute" value="1">

                     <param name="ShowControls" value="0">

                     <param name="ShowPositionControls" value="0">

                     <param name="ShowAudioControls" value="1">

                     <param name="ShowTracker" value="0">

                     <param name="ShowDisplay" value="0">

                     <param name="ShowStatusBar" value="0">

                     <param name="ShowGotoBar" value="0">

                     <param name="ShowCaptioning" value="0">

                     <param name="AutoStart" value=1>

                     <param name="Volume" value="-1000">

                     <param name="AnimationAtStart" value="0">

                     <param name="TransparentAtStart" value="0">

                     <param name="AllowChangeDisplaySize" value="0">

                     <param name="AllowScan" value="0">

                     <param name="EnableContextMenu" value="0">

                     <param name="ClickToPlay" value="0">

                     <param name="CurrentPosition" value="0">

                     <param name="windowlessVideo" value="1">

                     <param name=filename value=somefile.wmv>

              </object>

       </div>

       </td>

       </tr>

       </table>

       <script language="javascript">

 

       var src = document.getElementById("table1");

       var objDragItem = document.createElement("DIV");

       objDragItem.objVideo = document.getElementById("Object1");

       var Container = document.getElementById("div1");

       objDragItem.div1 = Container;

      

       objDragItem.style.fontSize = "1px";

       objDragItem.style.height       = 20;

       objDragItem.style.width       = 100;

       objDragItem.style.background = "#DDDDDD";

       objDragItem.style.fontColor  = "#0000ff";

       objDragItem.style.position    = "absolute";

       objDragItem.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";

      

       objDragItem.objVideo.style.position      = "absolute";

    objDragItem.objVideo.style.pixelTop  = 0;

    objDragItem.objVideo.style.pixelLeft = 0;

    objDragItem.objVideo.style.zIndex = 0;

      

       objDragItem.style.borderStyle       = "solid";

      objDragItem.style.borderWidth     = "1px";

      

    objDragItem.style.pixelTop  = 0;

    objDragItem.style.pixelLeft = 0;

    objDragItem.style.zIndex = 1;

 

       objDragItem.onmousedown = mousedown;

       objDragItem.objVideo.onmousedown = mousedownvideo;

       objDragItem.objVideo.onmousemove = mouseovervideo;

       objDragItem.objVideo.prnt = objDragItem;

 

       src.insertBefore(objDragItem);

      

       var leave = 0;

       function mousedownvideo(e)

       {

              this.Mute = !this.Mute;

       }

      

       function mouseovervideo(e)

       {

              leave = 0;

              if(this.prnt.style.display == "none")

              {

                     this.prnt.style.display = "";

              }

       }

      

       function mousedown(e)

       {

              leave = 0;

              state = this.objVideo.PlayState;

              if (state == 0)

                     this.objVideo.Play();

              else if (state == 1)

                     this.objVideo.Play();

              else if (state == 2)

                     this.objVideo.Pause();

       }

      

       var time = 0;

       var interval = 1000;

      

       function onload()

       {

              window.setInterval("onTimer();",interval);  

              objDragItem.style.display = "none";

       }

      

       function onTimer()

       {

              var ct = document.getElementById("div1");

 

              leave ++;

              if(leave > 3)

              {

                     objDragItem.style.display = "none";

              }

       }

      

       </script>

       </body>

</html>

 

 

第十三讲 MFC工具条和状态栏

第十三讲 MFC工具条和状态栏 Windows控制窗口 Windows (Windows95或者以上版本) 提供了系列通用控制窗口,其中包括工具条(ToolBar)、状态栏...
  • mitesi
  • mitesi
  • 2014年03月26日 23:18
  • 1340

Android toolbar阴影悬浮高亮效果

Android toolbar阴影悬浮高亮效果在android api 21一下toolbar是没有阴影效果的,后面找到解决api21以下实现阴影效果代码如下:acticity.xml文件:...
  • u012416928
  • u012416928
  • 2015年08月29日 22:52
  • 6213

对话框中添加工具条

在对话框中添加工具条主要有三个任务: 1、创建工具条按钮; 2、为按钮指定图标; 3、给按钮添加响应事件。         下面将利用资源管理器(也可以通过代码直接创建,这里占时不讨论...
  • u010260855
  • u010260855
  • 2014年03月30日 11:01
  • 1120

悬浮视频播放器实现

1.    背景: 我们都知道,Android手机的原生视频播放器并没有悬浮功能,也就是说当用户看视频时,就不能有其他方面的操作,例如看短信、看网页等打开其他应用。如果我们的手机能让用户一边看视频,...
  • wenbest
  • wenbest
  • 2014年11月17日 13:55
  • 2368

OpenLayers 3自定义地图工具条(一)

对于一个WEB地图应用来说,地图工具条可以说是不可或缺的一个部分,但由于一些样式、功能往往并不能满足实际项目需要,所以仍要对此部分进行定制,从这里将说明如何利用Oplenayers 3根据项目要求做一...
  • wan320
  • wan320
  • 2016年03月03日 15:45
  • 3173

Swift - 工具条(UIToolbar)的用法

(本文代码已升级至Swift3) 1,UIBarButtonItem是工具条按钮,有如下5种init初始化方法: (1)初始化为普通图片按钮 1 ...
  • yiyihuazi
  • yiyihuazi
  • 2017年06月17日 21:51
  • 518

简单实现Android底部工具栏

实现底部工具栏有很多种方法:可以用android的Tab控件,
  • fancylovejava
  • fancylovejava
  • 2014年05月28日 14:11
  • 7759

VC 2010 + MFC : 在对话框里面加入工具条CMFCToolBar

VC 2010 + MFC : 在对话框里面加入工具条CMFCToolBar By:章永辉              VC 2010 + MFC 新库的资料很少,以下给出本人的实现方...
  • CNHK1225
  • CNHK1225
  • 2015年07月23日 09:48
  • 2496

MFC创建自定义工具栏

1、插入一个工具栏资源。 2、创建一个工具栏窗口。 3、把插入的工具栏资源与创建的工具栏窗口绑定在一起。 4、设置工具栏可以停靠的位置。 5、设置父窗口可以被工具栏停靠。 CTool...
  • chuan442616909
  • chuan442616909
  • 2013年08月09日 20:31
  • 1369

Qt实现菜单栏,工具栏,状态栏

1.菜单栏1.设计模式点击 在这里输入 输入完毕后直接回车即可 同样子菜单也是同样操作。 如果我们想给菜单设置ICON,可以如下操作: 在File下新建一个Open子菜单,现在想给Ope...
  • zhuyunfei
  • zhuyunfei
  • 2016年03月30日 14:29
  • 5896
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:创建网页Video上的悬浮工具条(Create toolbar overflow video on webpage)
举报原因:
原因补充:

(最多只允许输入30个字)