适配Android与iOS的响应式Video.js CDN实现方案咨询

1. 全局样式配置 #

/* 视频外层容器，用padding占位实现固定宽高比 */
.video-responsive-container {
  position: relative;
  width: 100%;
  height: 0;
  /* 720/1280=0.5625，对应16:9比例，其他比例可按「视频高度/视频宽度*100%」计算修改 */
  padding-top: 56.25%;
  overflow: hidden;
}
/* 播放器完全覆盖外层容器 */
.video-responsive-container .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 修复iOS端视频尺寸适配异常问题 */
.video-js .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

2. HTML结构 #

<div class="video-responsive-container">
  <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="1280" height="720" poster="你的视频封面地址">
    <source src="你的视频地址" type="video/mp4" />
    <p class="vjs-no-js">请启用JavaScript后查看视频</p>
  </video>
</div>

3. 初始化JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const player = videojs('my-video', {
    autoplay: false,
    aspectRatio: '16:9',
    nativeControlsForTouch: true
  });
  // 适配横竖屏切换场景
  window.addEventListener('resize', function() {
    player.resize();
  });
});

注意事项 #

• 不要直接给video标签设置固定px宽高，外层容器会自动按比例适配不同屏幕宽度，不会出现初始加载超出屏幕的问题
• 非16:9比例的视频只需修改padding-top的数值即可适配
• 测试时如果出现上下黑边，检查外层容器是否设置了额外的max-width限制，按需调整即可

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