chimee 的展示

这章我们来了解下 chimee 的展示结构以及相关的功能。

chimee 的展示结构分为三个部分:wrapper、container 和 video。

他们依次包裹,结构如下:

  1. <section id="wrapper">
  2. <container style="z-index: 1; width: 100%; height: 100%; position: relative; display: block;">
  3. <video tabindex="-1" controls="" width="100%" height="100%" preload="auto" src="http://cdn.toxicjohann.com/lostStar.mp4">
  4. </video>
  5. </container>
  6. </section>

其中,插件分为内层插件和外层插件。而它们的位置如下:

  1. <section id="wrapper">
  2. <container style="z-index: 1; width: 100%; height: 100%; position: relative; display: block;">
  3. <video tabindex="-1" controls="" width="100%" height="100%" preload="auto" src="http://cdn.toxicjohann.com/lostStar.mp4">
  4. </video>
  5. <!-- 内层插件所在位置 -->
  6. </container>
  7. <!-- 外层插件所在位置 -->
  8. </section>

一般而言,我们会将内层插件视为播放器中的一部分,例如控制条、播放器弹窗、弹幕等。

而外层插件则并一般指播放器列表等。

以上就是 chimee 的基本展示结构。

全屏策略

当我们进行全屏的时候,我们采取的是对对应 div 进行 fullscreen。

我们默认采取的是对 container 进行全屏。

只需要简单调用即可。

  1. player.$fullscreen();

如果要退出全屏则传入 false。

  1. player.$fullscreen(false);

如果页面是嵌套在 iframe 中,则需要在 iframe 上设置 allowfullscreen 属性。