解决 ios 使用 video 全屏未铺满页面问题

低保和光头哪个先来2026-04-14 9:41

场景很简单，就是我在页面中放置了一个 video 标签，点击全屏按钮之后，并没有想象中的全屏效果，在安卓系统上这个功能是正常的，效果如下：

安卓系统全屏效果

ios 系统全屏实际效果

就算关闭了手机的竖屏锁定功能，旋转手机90度，仍然无法铺满，效果如下：

ios 系统全屏横屏实际效果

本文我们将解决 ios 系统下使用 video 标签全屏未铺满的问题，最终效果如下：

ios 系统全屏理想效果

我们直接上代码：

html 复制代码

<video id="live-video" playsinline webkit-playsinline class="video"></video>

这里我用到的是 Plyr 库去播放 m3u8 和 mp4 格式的视频，初始化时用到了 iosNative 属性，这个是关键：

设置 iosNative 为 true，就意味着在 iOS 上，优先使用系统原生播放器全屏（而不是 Plyr 自己的伪全屏）

通过监听用户点击全屏的点击事件，拦截 Plyr 的全屏按钮点击行为，在 iOS 上强制走原生全屏

javascript 复制代码

let playerInstance = null

const isIOS = () => {
  return /iphone|ipad|ipod/i.test(navigator.userAgent) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
}

const initVideo = () => {
    const videoEl = document.getElementById('live-header-video');
    if (!videoEl) return

    playerInstance = new Plyr(videoEl, {
        fullscreen: {
          enabled: true,
          iosNative: true
        },
        controls: isOpen
            ? ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen']
            : ['play', 'mute', 'volume', 'fullscreen'],
        muted: true
     })

     await nextTick(() => {
        const fullscreenBtn = playerInstance.elements.container.querySelector('[data-plyr="fullscreen"]')

        if (fullscreenBtn) {
            fullscreenBtn.addEventListener('click', (e) => {
            if (isIOS()) {
              console.log('ios系统')
              e.preventDefault()

              if (videoEl.webkitEnterFullscreen) {
                videoEl.webkitEnterFullscreen()
              }
        } else {
          console.log('安卓系统')
        }
      })
    }
  })
}

基于以上方法就可以成功实现了！