一般在视频区域中做框样式,作应由视频插件自己来实现,但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法,按照行外应该属于笨方法,虽然有点笨,可能在其他方面有借鉴意义,在这里拿出来跟大家分享。
对于一个视频插件OBJECT,每个边从中间点均分两份, 两个相对边的中间点之间的连线也按中间点分为两份,对于每一份定义一个div标签与其对应,为了保证每份的长度不写死,使其依赖于边的宽和高,定义每份的长度为 50%,宽度定义为1px。 使用绝对定位将每份的div,对应到视频对象的边上。
同时由于OBJECT属于窗口级别对象,对于任意div都不能显示在上层,即时定义z-index属性。为解决这个问题,经过查证后,在div内部预置一个<iframe>标签则可以解决这个问题。
下面给出演示代码,在chrome下可以看见框选有效,其样式需要再调节。