关闭

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

标签: video工具javascriptfunctiondivobject
1848人阅读 评论(0) 收藏 举报
分类:

创建网页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>

 

 

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:118186次
    • 积分:1615
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:6篇
    • 译文:3篇
    • 评论:50条
    最新评论