css - mediaelement.js -> 更大的按钮？

Question

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

乔瓦伦廷

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;
      }
}