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

最新推荐文章于 2024-04-03 09:50:05 发布
最新推荐文章于 2024-04-03 09:50:05 发布
阅读量3.2k 收藏
点赞数
分类专栏： 程序发布 技术研究 文章标签： video 工具 javascript function div object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/guanzhongs/article/details/814093
版权
本文介绍了如何使用JavaScript脚本来实现网页Video上的悬浮工具条。在视频窗口上添加了一个弹出式工具条，当鼠标悬停时显示，一段时间无操作后自动隐藏。在试验过程中，遇到Windows MediaPlayer控件覆盖div的问题，最终通过设置WMP控件属性解决了这一问题，实现了视频播放/暂停的控制功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建网页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 οnlοad="onload();">

       <table id="table1">

       <tr>

       <td>

       <div id="div1">

              <object classid=clsid:22d 6f 312-b 0f 6-11d0-94ab -0080c 74c 7e95 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>

 

 

iOS代码动态消除iPhone X底部工具条(ToolBar)与键盘间的夹缝
享受开发，颠倒银河
04-23 2240
在App界面底部增加工具条并不少见,在工具条上增加输入框更所谓是"应知应会".下面本猫就向大家介绍如何适配iPhoneX中底部工具条与弹出键盘的相对位置.
videojs默认显示controls 按钮功能失效_VBA｜自定义菜单栏、工具栏、功能区
weixin_39684454的博客
12-11 719
Excel2007中，功能区替代了以前的分层菜单、工具栏和任务窗格系统。自定义菜单栏、工具栏的效果：主要是使用CommandBars对象模型：VBA代码：1 自定义菜单命令组'自定义菜单命令组Public Sub creatediyMenu() For Each con In Application.CommandBars("Data").Controls con.Delete...
网页滚动右下角悬浮视频播放器
weixin_44239035的博客
05-13 1262
但是我有一个问题一直没搞清楚，将这个代码写在一个页面中时，一直提示Cannot read property ‘top’ of undefined，我百度了一些原因但还是没有解决 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Doc...
Float Bar：轻巧高效的浏览器浮动工具栏
最新发布
gitblog_00020的博客
04-03 352
Float Bar：轻巧高效的浏览器浮动工具栏 去发现同类优质开源项目:https://gitcode.com/ 在数字时代，我们每天都在网页间穿梭，浏览、学习、工作，而一款能够提升用户体验的小工具往往能带来大大的便利。这就是我想向大家推荐的项目——，一个开源的浏览器浮动工具栏插件。这款小巧实用的工具，旨在帮助你在繁忙的网络活动中更加高效地导航和操作。 项目简介 Float Bar 是由开发者 T...
微信小程序 video全屏 Android手机按钮悬浮在视频上
weixin_39725702的博客
07-04 2230
问题： 微信小程序 video全屏时按钮要悬浮在视频上 解决：用<cover-view>组件，设置position,z-index，并放在<video>组件中 要把 cover-view 作为 video 的子节点，全屏时才能在显示(否则在android手机端不显示）。 <video> <cover-view></cover-view&...
html左侧导航视频,（2）HTML5+CSS：左边导航栏，右边是对应的视频
weixin_39721953的博客
06-04 489
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test/*#right{display:inline;}*/#list1a:hover{color:#CC0033;}#list2a:hover{color:#CC0...
自定义video控制栏，移动端可行
weixin_33759269的博客
07-19 521
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>预览页</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximu...
制作ToolBar工具条
11-03
本教程将详细讲解如何创建并定制ToolBar工具条。 1. **创建MFC应用程序** 首先，打开Visual Studio 2010，选择“文件”>“新建”>“项目”。在项目类型中，选择“MFC”，然后在模板中选择“MFC应用程序”。输入...
mxgraph中右键和toolbar工具条的实现
06-29
3. **创建工具条**：使用`mxToolbar`类创建工具条，并添加按钮。 ```javascript var toolbar = new mxToolbar(document.getElementById('toolbar')); toolbar.addItem('添加节点', 'images/plus.png', function() {...
在MFC工具栏ToolBar上面添加Edit控件
09-08
在MFC应用中，工具栏（ToolBar）通常用于放置各种快捷按钮，以便用户快速执行常用操作。然而，有时候我们可能需要在工具栏上添加更复杂的交互元素，如编辑框（Edit Control），使得用户可以直接在工具栏中输入文本。...
VC自定义工具栏按钮图标，并且显示悬浮提示
10-05
- 确保工具栏控件的`TBSTYLE_TOOLTIPS`样式被设置，这可以通过在创建工具栏时传递`WS_EX_CLIENTEDGE`风格或者使用`ModifyStyleEx`函数来完成。 4. **VC6中的注意事项**： - VC6相对比较老，可能不支持某些较新的...
【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-23 2100
一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例
原生JavaScript实现video视频控制栏
vmanas_的博客
11-08 1204
视频控制器 video 全屏 取消全屏 原生js
video 移动端视频浮动
qq_34297991的博客
03-11 1145
1、会全屏，不适用。x5-video-orientation可以设置竖屏横屏 <video webkit-playsinline="true" x5-video-player-type="h5" x5-video-orientation="portraint"> 2、有可能是视频没有设置高度，设置一个固定高度，把视频定位在空白页面 ...
Video标签上面覆盖播放按钮点击播放
老蔡学代码
11-29 2万+
最终效果： 自定义图片（背景不是poster）。覆盖到视频上，然后点击这个可以 播放。 HTML部分： &lt;div class="video-box" &gt; &lt;video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px"&gt
Video.js使用教程一（详解）
热门推荐
Mr.小强的博客
04-11 11万+
在项目上遇到类似于直播的场景所以需要前端播放后台的视频流这个问题，所以就此问题记录一下， 在上一篇文章中写到了怎样搭建nginx流媒体服务器以及怎样使用ffmpeg进行推流，那么现在就缺前端拉流这一部分，通过这两个天的辛勤劳动终于解决了，在这也希望分享给正在搞这个问题的童鞋们。 一、简单了解几种流 HLS流： 1、HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Li...
VC:制作视频播放器（ActiveX控件、工具栏、菜单栏、滑块、打开对话框））
acass424022的博客
10-15 285
1、先把文件AMOVIE.OCX复制到某一目录下，例如D:\下，然后选择“开始”|“运行”命令，输入“regsvr32D:\AMOVIE.OCX”,单击“确定”按钮后，弹出对话框，显示注册成功。 2、利用类向导，创建一个基于对话框的应用程序，删除向导自动生成的确定、取消按钮。选择Project？ADD。。。添加ActiveMovie Control Object选项。 3、单击Ins...
h5 video 样式 去掉工具条 点击播放暂停
qq_40599116的博客
09-19 3934
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;button onclick="play()&quo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值