如何实现iOS Safari移动端视频全屏？求适配解决方案

问题说明 #

已完成桌面端Safari的视频全屏适配，但iOS移动端Safari无法正常触发全屏功能。核心原因是iOS Safari不支持为div容器申请全屏，必须直接对video元素调用webkitEnterFullscreen()方法实现全屏。

原实现通过点击按钮触发容器div全屏，已适配桌面端Safari，但iOS移动端无效，需快速修改JS代码完成适配。

完整适配代码 #

HTML（无需修改） #

<div id="animatedgif_1" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; ">
  <video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
    <source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-wish.mp4" type="video/mp4"></video>
  <div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
    <img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
  </div>
</div>

&nbsp;

<div id="animatedgif_2" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; padding-bottom:0em !important; ">
  <video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
    <source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-hobbit-1280crf.mp4" type="video/mp4"></video>
  <div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
    <img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
  </div>
</div>

CSS（无需修改） #

.fx_fadeIn img {
  opacity: 00%;
  transition: opacity 0.5s;
}

.fx_fadeIn:hover img {
  opacity: 100%;
  transition: opacity 1s;
}

.centrer-verticalement[style*="background: transparent"]+#btn_fs img {
  opacity: 20%;
  transition: opacity 0.5s;
}

.centrer-verticalement[style*="background: transparent"]+#btn_fs img:hover {
  opacity: 100%;
  transition: opacity 0.5s;
}

.fx_fadeIn .centrer-verticalement[class*="background: none"]+#btn_fs img {
  opacity: 0%;
  transition: opacity 0.5s;
}

.fx_fadeIn:hover .centrer-verticalement[style*="background: none"]+#btn_fs img {
  opacity: 100%;
  transition: opacity 1s;
}

#btn_fs {
  bottom: 1em;
  right: 1em;
}

修改后的JavaScript #

var bool_isFullscreen = false;
var myVideoGIF; // 容器div
var myVideoElement; // 当前操作的video元素

// 监听全屏状态变化，兼容标准和Safari事件
window.addEventListener('fullscreenchange', on_FS_Change, false);
window.addEventListener('webkitfullscreenchange', on_FS_Change, false);

function on_FS_Change(evt) {
  // 判断当前是否处于全屏状态，兼容标准和Safari属性
  bool_isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement);
  
  if (!bool_isFullscreen) {
    exit_FullScreen();
  }
}

function go_FullScreen(input) {
  myVideoGIF = input.parentNode;
  myVideoElement = myVideoGIF.children[0]; // 获取当前video元素

  if (bool_isFullscreen) {
    exit_FullScreen();
    return;
  }

  // 区分iOS移动端和其他浏览器
  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    // iOS Safari下直接调用video的webkitEnterFullscreen
    if (myVideoElement.webkitEnterFullscreen) {
      myVideoElement.webkitEnterFullscreen();
    }
  } else {
    // 其他浏览器（包括桌面端Safari）对容器div请求全屏
    function openFullscreen(elem) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    }
    openFullscreen(myVideoGIF);
  }

  myVideoElement.style.width = "100%";
  myVideoElement.style.height = "100%";
  myVideoElement.style.background = "transparent";
  bool_isFullscreen = true;
}

function exit_FullScreen() {
  if (!bool_isFullscreen) return;

  bool_isFullscreen = false;

  // 兼容标准和Safari的退出全屏方法
  if (document.exitFullscreen) {
    document.exitFullscreen()
      .then(() => console.log("退出全屏模式"))
      .catch((err) => console.error(err));
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }

  // 恢复video样式
  myVideoElement.style.background = "none";
}

关键改动说明 #

1. iOS专属处理：通过UA判断iOS设备，直接对video元素调用webkitEnterFullscreen()，避开div容器无法全屏的限制
2. 事件与状态兼容：同时监听标准全屏事件和Safari私有事件，统一判断全屏状态的逻辑
3. 退出逻辑统一：兼容不同浏览器的退出全屏方法，确保iOS和桌面端行为一致

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