mediaelement.js -> 更大的按钮？

Question

我正在尝试让 ipad/android 的控制栏更大。尤其是全屏 按钮。更改 css 时，它会更大，但对整个矩形都有效，例如 有什么想法吗？

Ciao Valentijn

Answer 1

此解决方案仅适用于 css。

我只是通过调整背景大小和背景位置属性来调整媒体查询中所有元素的大小，以及按钮 css 精灵/背景图像。

以下样式仅适用于播放、暂停、全屏和非全屏按钮，但您明白了，应该能够完成缺少的按钮。

@media only screen and (min-width : 1824px) {

  .mejs-container .mejs-controls {
    height: 60px;
  }
    .mejs-container .mejs-controls div {
      width: 60px;
      height: 60px;
    } 
    .mejs-controls .mejs-time-rail span {
      height: 40px;
    }    
    .mejs-container .mejs-controls .mejs-time {
      height: 40px;
    }    
      .mejs-container .mejs-controls .mejs-time span {
        font-size: 20px;
        line-height: 40px;
      }    
    .mejs-controls .mejs-button button {
      width: 46px;
      height: 46px;
      background-size: 400px;
    }    
      .mejs-controls .mejs-play button {
      }    
      .mejs-controls .mejs-pause button {
        background-position: 0 -44px;
      }    
      .mejs-controls .mejs-fullscreen-button button {
        background-position: -90px 0;
      }    
      .mejs-controls .mejs-unfullscreen button {
        background-position: -90px -44px;
      }
}