一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用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. ACM Haffman编码

    Haffman编码 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 哈弗曼编码大家一定很熟悉吧(不熟悉也没关系,自己查去...).现在给你一串字符以及它们所对应的权值 ...

  2. [Leetcode] Recover Binary Search Tree

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  3. MapReduce输入格式

    文件是 MapReduce 任务数据的初始存储地.正常情况下,输入文件一般是存储在 HDFS 里面.这些文件的格式可以是任意的:我们可以使用基于行的日志文件, 也可以使用二进制格式,多行输入记录或者其 ...

  4. [CareerCup] 18.12 Largest Sum Submatrix 和最大的子矩阵

    18.12 Given an NxN matrix of positive and negative integers, write code to find the submatrix with t ...

  5. 三种线程不安全现象描述（escaped state以及hidden mutable state)

    hidden mutable state和escaped state是两种线程不安全问题:两者原因不同,前者主要是由于类成员变量中含有其他对象的引用,而这个引用是immutable的:后者是成员方法的 ...

  6. 日志分析_统计每日各时段的的PV,UV

    第一步: 需求分析 需要哪些字段(时间:每一天,各个时段,id,url,guid,tracTime) 需要分区为天/时 PV(统计记录数) UV(guid去重) 第二步: 实施步骤 建Hive表,表列 ...

  7. Centos 下安装 文泉驿 字体 Odoo

    刚装完centos下的odoo的字体 文泉驿 ,一万头草泥马呼啸而过.....劝君如非必要,千万别再centos下折腾odoo..... 正题,文泉驿官网 只提供 deb包和源码包的字体安装 ,想在c ...

  8. java UDP 简单实现编程

    http://kuchaguangjie.iteye.com/blog/911145 http://blog.csdn.net/pengchua/article/details/4398972 htt ...

  9. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  10. bzoj1222: [HNOI2001]产品加工--DP

    DP神题orz dp[i]表示机器1工作i小时,机器2工作dp[i]小时 那么对于每个任务: 选1:dp[i]=dp[i-a]; 选2:dp[i]=dp[i]+b; 选1+2:dp[i]=dp[i-c ...