一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用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; 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="50%; height:1px; position:absolute; top:0px; left:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- top right --> <div id="BoxBorder_topRight" style="50%; height:1px; position:absolute; top:0px; left:50%; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- right top --> <div id="BoxBorder_rightTop" style="1px; height:50%; position:absolute; top:0px; right:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- right down --> <div id="BoxBorder_rightDown" style="1px; height:50%; position:absolute; top:50%; right:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- bottom left --> <div id="BoxBorder_bottomLeft" style="50%; height:1px; position:absolute; bottom:0px; left:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- bottom right --> <div id="BoxBorder_bottomRight" style="50%; height:1px; position:absolute; bottom:0px; right:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- left top --> <div id="BoxBorder_leftTop" style="1px; height:50%; position:absolute; top:0px; left:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- left down --> <div id="BoxBorder_leftDown" style="1px; height:50%; position:absolute; top:50%; left:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- vertical up --> <div id="BoxBorder_verticalUp" style="1px; height:50%; position:absolute; left:50%; top:0px; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- vertical down --> <div id="BoxBorder_verticalDown" style="1px; height:50%; position:absolute; left:50%; top:50%; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- horizon left --> <div id="BoxBorder_horizonLeft" style="50%; height:1px; position:absolute; left:0px; top:50%; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <!-- horizon right --> <div id="BoxBorder_horizonRight" style="50%; height:1px; position:absolute; left:50%; top:50%; "> <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; 100%; height:100%; z-index:-1;;"></iframe> <div style="100%; height:100%; background:red;"></div> </div> <script>window.createPopup();</script> </div> </body> </html>