VideoJS iOS端禁用播放自动全屏并保留全屏控制面板

嘿，我之前刚好踩过VideoJS在iOS上的这些坑，给你整理了亲测有效的解决方案，分两部分处理你的问题：

一、禁用iOS自动跳原生全屏 #

iOS Safari默认会强制视频播放时进入原生全屏，这是它的默认行为，要绕开需要同时搞定HTML属性和VideoJS配置：

1. 先给你的<video>标签加上playsinline和webkit-playsinline属性（兼容旧版iOS），同时在VideoJS的初始化配置里也加上playsinline: true：

<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" 
       controls preload="auto" poster="..." 
       playsinline webkit-playsinline
       data-setup='{"language":"en", "controls": true,"autoplay": false, "fluid": true, "aspectRatio": "16:9", "playbackRates": [0.5, 1, 1.5, 2], "playsinline": true}'>
  <!-- 你的source标签保持不变 -->
</video>

这个配置的核心是告诉iOS“允许视频在页面内联播放”，而不是强制跳转到原生全屏。

2. 如果是在微信等内嵌浏览器里，可能还要加x5-video-player-type="h5"和x5-video-player-fullscreen="false"，但针对Safari的话，上面的配置就足够了。

二、确保全屏模式下控制面板正常显示 #

如果全屏后控件不见了，大概率是原生全屏覆盖了VideoJS的自定义控件，或者控件被隐藏了，试试这两个方案：

方案1：强制用VideoJS自定义全屏 #

直接禁用原生全屏，让VideoJS自己渲染全屏控件，这样就不会出现控件丢失的问题。在初始化Player的时候加上全屏配置：

var myPlayer = videojs("#tvideo", {
  // 其他原有配置不变，加上这段全屏设置
  fullscreen: {
    options: {
      nativeFullscreen: false
    }
  },
  // 下面是你的原有配置
  language: "en",
  controls: true,
  autoplay: false,
  fluid: true,
  aspectRatio: "16:9",
  playbackRates: [0.5, 1, 1.5, 2],
  playsinline: true
});

这样全屏时用的是VideoJS自己的控件，和非全屏状态下的体验一致，控制面板肯定能正常用。

方案2：修复原生全屏下的控件问题 #

如果你还是想用原生全屏，那需要确保VideoJS的控件在原生全屏状态下能显示：

• 先检查你的VideoJS版本，旧版本在iOS原生全屏上有兼容bug，建议升级到最新稳定版。
• 排查一下有没有自定义CSS把全屏状态下的控件隐藏了，比如看看.vjs-fullscreen .vjs-control-bar的display属性是不是flex（默认应该是）。
• 可以在Player ready的时候加个监听，强制全屏时显示控件：

myPlayer.ready(function() {
  // 你的其他代码...
  
  this.on('fullscreenchange', function() {
    if (this.isFullscreen()) {
      // 强制显示控件
      this.controlBar.show();
      // 可以设置自动隐藏的延迟，比如3秒后自动隐藏，和默认行为一致
      this.controlBar.hide(3000);
    }
  });
});

整合后的完整代码参考 #

我把上面的修改整合到你的代码里了，这样更直观：

<video id="tvideo" class="video-js vjs-default-skin vjs-big-play-centered" 
       controls preload="auto" poster="..." 
       playsinline webkit-playsinline
       data-setup='{}'> <!-- 把配置移到JS里更清晰，避免data-setup太臃肿 -->
  <source src="..." type='video/mp4' label='240p' res='240'/>
  <source src="..." type='video/mp4' label='360p' res='360'/>
  <source src="..." type='video/mp4' label='720p' res='720'/>
  <p class="vjs-no-js">Bu videoyu görüntülemek için lütfen JavaScript'i etkinleştirin.</p>
</video>

<script type="text/javascript">
var myPlayer = videojs("#tvideo", {
  language: "en",
  controls: true,
  autoplay: false,
  fluid: true,
  aspectRatio: "16:9",
  playbackRates: [0.5, 1, 1.5, 2],
  playsinline: true,
  fullscreen: {
    options: {
      nativeFullscreen: false
    }
  }
});

myPlayer.videoJsResolutionSwitcher({ 
  default: 'high', 
  dynamicLabel: true 
}); 
myPlayer.persistvolume({ namespace: 'httpswwwseyredelimcom' }); 
myPlayer.brand({ 
  image: "...", 
  title: "...", 
  destination: "...", 
  destinationTarget: "_top" 
}); 

myPlayer.ready(function() {
  this.hotkeys({ 
    volumeStep: 0.1, 
    seekStep: 5, 
    enableModifiersForNumbers: false 
  }); 

  $(".bAd").detach().appendTo(".video-js"); 
  $(".plAd").detach().appendTo(".video-js"); 

  function resizeVideoJS() { 
    var containerWidth = $('.video-player').width(); 
    var videoHeight = Math.round((containerWidth / 16) * 9); 
    myPlayer.width(containerWidth).height(videoHeight); 
  } 
  window.onresize = resizeVideoJS; 

  myPlayer.on("ended", function() { 
    startNextVideo(); 
  }); 

  // 全屏时强制显示控件
  this.on('fullscreenchange', function() {
    if (this.isFullscreen()) {
      this.controlBar.show();
      this.controlBar.hide(3000);
    }
  });
});
</script>

最后提个小建议：测试一定要用真实的iOS设备，模拟器的行为有时候和真机不一样哦～

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