一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法，按照行外应该属于笨方法，虽然有点笨，可能在其他方面有借鉴意义，在这里拿出来跟大家分享。

对于一个视频插件OBJECT，每个边从中间点均分两份， 两个相对边的中间点之间的连线也按中间点分为两份，对于每一份定义一个div标签与其对应，为了保证每份的长度不写死，使其依赖于边的宽和高，定义每份的长度为 50%，宽度定义为1px。 使用绝对定位将每份的div，对应到视频对象的边上。

同时由于OBJECT属于窗口级别对象，对于任意div都不能显示在上层，即时定义z-index属性。为解决这个问题，经过查证后，在div内部预置一个<iframe>标签则可以解决这个问题。

下面给出演示代码，在chrome下可以看见框选有效，其样式需要再调节。

<html>

<body>

<div style="position:absolute; left:50%; top:50%; margin-left:-100; margin-top:-100; width:200px; height:200px;"> 

<object style="position:absolute; top:0px; left:0px;" height="200px" width="200px" type="image/jpeg" data="./meinv.jpg">

</object>

<!-- top left -->

<div id="BoxBorder_topLeft" style="width:50%; height:1px; position:absolute; top:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- top right -->

<div id="BoxBorder_topRight" style="width:50%; height:1px; position:absolute; top:0px; left:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- right top -->

<div id="BoxBorder_rightTop" style="width:1px; height:50%; position:absolute; top:0px; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- right down -->

<div id="BoxBorder_rightDown" style="width:1px; height:50%; position:absolute; top:50%; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- bottom left -->

<div id="BoxBorder_bottomLeft" style="width:50%; height:1px; position:absolute; bottom:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- bottom right -->

<div id="BoxBorder_bottomRight" style="width:50%; height:1px; position:absolute; bottom:0px; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- left top -->

<div id="BoxBorder_leftTop" style="width:1px; height:50%; position:absolute; top:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- left down -->

<div id="BoxBorder_leftDown" style="width:1px; height:50%; position:absolute; top:50%; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- vertical up -->

<div id="BoxBorder_verticalUp" style="width:1px; height:50%; position:absolute; left:50%; top:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- vertical down -->

<div id="BoxBorder_verticalDown" style="width:1px; height:50%; position:absolute; left:50%; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- horizon left -->

<div id="BoxBorder_horizonLeft" style="width:50%; height:1px; position:absolute; left:0px; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- horizon right -->

<div id="BoxBorder_horizonRight" style="width:50%; height:1px; position:absolute; left:50%; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<script>window.createPopup();</script>

</div>

</body>

</html>

一种在视频OBJECT标签上放置均分四个区域的框选方法的更多相关文章

  1. MVC下form表单一次上传多种类型的图片（每种类型的图片可以上传多张）

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  2. 视频直播 object 标签属性详解

    最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...

  3. html中object标签详解

        定义和用法 object标签定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. &l ...

  4. html标签之Object标签详解

    定义和用法 定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. <object> ...

  5. 【转载】html中object标签详解

    [转载自http://blog.csdn.net/soliy/archive/2010/03/22/5404183.aspx] html标签之Object标签详解 作者:网络    出处:网络     ...

  6. HTML的<Object>标签怎么用？

    <object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体:它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目.它还可 ...

  7. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  8. HTML的<object>标签 (转)

    object标签用于定义一个嵌入的对象,包括:图像.音频.Java applets.ActiveX.PDF以及Flash.该标签允许您规定插入HTML文档中的对象的数据和参数,以及可用来显示和操作数据 ...

  9. object标签和embed标签

    概述 html中有许多用于嵌入各种类型内容的标签,包括:embed,audio,canvas,iframe,img,math,object,svg和video.之前我在很多地方都看到了object标签 ...

随机推荐

  1. Redis的两个小技巧

    1.通配删除相同前缀的缓存 DEL命令的参数不支持通配符,但我们可以结合Linux的管道和xargs命令自己实现删除所有符合规则的键. 比如要删除所有以“structure_”开头的键,就可以执行下面 ...

  2. [深入浅出WP8.1(Runtime)]Toast通知

    9.1 Toast通知 Toast通知是在屏幕最顶上弹出来的临时通知,是Windows Phone通用的弹出式短暂的通知,默认的系统消息都是采用Toast通知的形式,比如当你手机收到短信的时候,在手机 ...

  3. 【POJ】3207 Ikki's Story IV - Panda's Trick

    http://poj.org/problem?id=3207 题意:一个圆上顺时针依次排列着标号为1-n的点,这些点之间共有m条边相连,每两个点只能在圆内或者圆外连边.问是否存在这些边不相交的方案.( ...

  4. 【BZOJ】1115: [POI2009]石子游戏Kam

    http://www.lydsy.com/JudgeOnline/problem.php?id=1115 题意:n堆石子,个数是从左到右单增.每一次可以从任意堆取出任意石子,但要保持单增这个性质.问先 ...

  5. NOI模拟赛Day3

    终于A题啦鼓掌~开心~ 开考看完题后,觉得第二题很好捏(傻叉上线 搞到十一点准备弃疗了然后突然发现我会做第一题 于是瞎码了码,就去准备饭票了... 好了,停止扯淡(就我一个我妹子每天不说话好难受QAQ ...

  6. js小效果-双色球

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. docker WARNING: bridge-nf-call-iptables is disabled 处理

    在CentOS中 vim /etc/sysctl.conf net.bridge.bridge-nf-call-ip6tables = net.bridge.bridge-nf-call-iptabl ...

  8. UniversalAndroidImageLoader出现异常：ImageLoader: Unable to resolve host "https": No address associated with host

    问题描述 使用ImageLoader时,出现如下错误,始终加载图片错误,显示img_error的图片.UniversalAndroidImageLoader出现异常:ImageLoader: Unab ...

  9. js中常用的Tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 本地数据库（SQL Server）远程连接服务器端服务器

    本地数据库(SQL Server 2012) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1. 首先是要打开 数据的配置管理工具 2. 配置相关的客户端协议,开启TCP/IP 3. 数据库 ...