插件位置

插件位置主要涉及以下几个问题

• 节点位置
• 层级位置

节点位置

需要了解的是，一般播放器都具有全屏的需求。而如果直接全屏原生 video 组件，那么诸如弹幕、控制条等内容都会丢失，并且会展现原播放器的控制条。

因此，一般我们采取将外层 div 全屏的策略。但是考虑到并非所有插件都需要全屏（例如外部列表）。我们引入了外层插件和内层插件的概念。

层级概念如下

• wrapper 【播放器最外层】

  • container 【播放器容器】
    • video 【原生播放器】
    • inner-plugin 【内层插件】
  • outer-plugin 【外层插件】
    在开发插件时，开发者可以主动注明属于何层插件，详细注明方式见参数相关介绍。由于 inner 属性的特殊性一经声明不能更改。

• 当inner为 true 时，为内层插件。

• 当inner为 false 时， 为外层插件
• 默认inner 为 true

层级位置

另外一个比较重要的是插件层摆放的层级。因为较高的层级会遮挡较低的层级，不利于后者交互。现时播放器内部会主动设置相应的插件的层级，使用 z-index 进行相应设置。

设置的顺序依据如下：

用户安装插件的顺序

用户越早安装的插件，层级数越低。

可以理解为，后期安装的插件相当于直接 append 到相应父节点上。

level值的设置

level值较高者的层级位置永远在level值较低者之上。

因为插件的安装顺序与插件事件执行顺序有关。因此对于某些插件必须要有先安装。但是该插件仍然需要显示在顶层。此时应该使用较高的level值。

此需求最常见发生在广告插件上。因为广告需要阻截其他插件的事件处理，所以应该优先安装。但是广告同时要与周边交互，所以level值应该较高。

level 值可以由用户设置、插件默认设置或插件内部通过 $level 动态设置。

事实上并不鼓励插件自定义 level 值， 那样会造成用户使用的时候混乱。但是万一插件需要置顶怎么办，此时调用 $bumpToTop 即可。

另外相关的知识点

• 层级的排序在内层与外层的排序互不干扰。
• 内层基准点为原生 video 元素。
• 外层基准点为 container 元素。
• 当 level 值低于 0 时，其层级低于基准点层级。
  • 可以利用此特性可以制作如毛玻璃背景的效果。
• 当 level 值大于 0 时，其层级高于基准点层级。