Azure Media Player仅在Android设备上出现左偏移问题

我在页面嵌入了4个Azure Media Player，桌面端和iOS设备运行正常，但在Android设备上，当屏幕宽度小于430px时，播放器出现左偏移，右侧显示黑色区域。

原使用代码 #

JavaScript

var myAmpOptions = {
    "nativeControlsForTouch": false,
    "logo": { "enabled": false },
    autoplay: false,
    controls: false,
    fluid: false,
    "plugins": {},
    poster: "https://anawaz.tk/intvprime/assets/imgs/stream-now-loading.jpg"
};
var tile1_player = amp("tile1-azuremediaplayer", myAmpOptions);

tile1_player.src([{ src: "https://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },]);

HTML

<script src="https://amp.azure.net/libs/amp/2.3.10/azuremediaplayer.min.js" crossorigin="anonymous"></script>

<video id="tile1-azuremediaplayer" class="azuremediaplayer amp-default-skin" width="100%" height="100%" tabindex="0">
          <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>  
</video>

解决方案 #

• 添加容器控制溢出：给播放器外层套一个容器，强制隐藏溢出内容，避免偏移导致的黑边显示。
  新增CSS：

  .amp-wrapper {
      width: 100%;
      overflow: hidden;
      position: relative;
  }
  

  修改HTML结构：

  <div class="amp-wrapper">
      <video id="tile1-azuremediaplayer" class="azuremediaplayer amp-default-skin" width="100%" height="100%" tabindex="0">
          <p class="amp-no-js">
              To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
          </p>  
      </video>
  </div>
  

• 覆盖小屏幕默认样式：针对宽度小于430px的Android设备，强制修正播放器的定位和宽度，抵消默认样式的偏移：

  @media (max-width: 430px) {
      .azuremediaplayer {
          width: 100% !important;
          left: 0 !important;
          transform: none !important;
      }
      .amp-video-container {
          width: 100% !important;
      }
  }
  

• 启用Fluid自适应模式：将AMP配置中的fluid: false改为fluid: true，让播放器自动适配容器宽度，保持正确的宽高比，减少手动设置宽高带来的适配问题：

  var myAmpOptions = {
      "nativeControlsForTouch": false,
      "logo": { "enabled": false },
      autoplay: false,
      controls: false,
      fluid: true, // 修改为true
      "plugins": {},
      poster: "https://anawaz.tk/intvprime/assets/imgs/stream-now-loading.jpg"
  };
  

• 升级AMP版本：当前使用的2.3.10版本较旧，尝试升级到最新稳定版（如2.9.0），旧版本可能存在移动端适配的已知bug，新版本通常会修复这类问题。

内容的提问来源于stack exchange，提问作者Ahmad Nawaz