Ionic-Cordova中VideoJS横屏异常求助及iOS原生HTML5播放器横屏需求

Hey there, let's tackle this tricky screen rotation issue you're facing with VideoJS in your Ionic-Cordova app. I've dealt with similar quirks before, so here are some targeted steps to get your video and controls rotating properly:

1. Isolate the Third-Party Plugin First #

Since you suspect a recently installed plugin is the root cause, let's start here:

• Temporarily remove the plugin and test rotation behavior. If the video/controls start rotating correctly, you've found the culprit. Even if the developer says it doesn't control screen orientation, plugins can unintentionally override UIViewController methods (like shouldAutorotate or supportedInterfaceOrientations) that affect WebView rotation.
• If removing isn't an option, dig into the plugin's source code. Look for any custom view controllers or orientation-related logic—sometimes plugins inject code that locks rotation for specific views, which can bleed into your video container.

2. Fix VideoJS's Responsive Behavior #

Non-fullscreen VideoJS relies on WebView layout updates, which might not trigger automatically on rotation:

• Listen for orientation changes and force VideoJS to resize:

  window.addEventListener('orientationchange', () => {
    // Add a small delay to let the DOM adjust first
    setTimeout(() => {
      const player = videojs('your-video-element-id');
      if (player) {
        player.handleResize(); // Tells VideoJS to recalculate dimensions
      }
    }, 100);
  });
  

• Check your video container styling: Make sure the container isn't using fixed widths/heights or position: fixed without responsive fallbacks. Use relative units like % or vh/vw to let it adapt to screen size:

  .video-js {
    width: 100% !important;
    height: auto !important;
    max-height: 90vh;
  }
  

3. Verify iOS & Cordova Orientation Configs #

Even if you checked Xcode settings, double-check these:

• Update config.xml: Ensure it allows all needed orientations:

  <preference name="Orientation" value="all" />
  <preference name="AllowInlineMediaPlayback" value="true" /> <!-- Critical for iOS inline video rotation -->
  

• Check Info.plist: Confirm UISupportedInterfaceOrientations (and UISupportedInterfaceOrientations~ipad for tablets) includes all required orientations:

  <key>UISupportedInterfaceOrientations</key>
  <array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
  </array>
  

• Fix Cordova's Main View Controller: If Objective-C tweaks didn't work before, ensure MainViewController.m has these methods (Cordova sometimes overrides them):

  - (BOOL)shouldAutorotate {
      return YES;
  }
  
  - (UIInterfaceOrientationMask)supportedInterfaceOrientations {
      return UIInterfaceOrientationMaskAllButUpsideDown; // Adjust based on your needs
  }
  

4. Sync WebView & Native Rotation Events #

Sometimes the WebView doesn't pick up native rotation events immediately. Add this to your AppDelegate.m to force a JS-side event:

- (void)application:(UIApplication *)application didChangeStatusBarOrientation:(UIInterfaceOrientation)oldStatusBarOrientation {
    // Trigger orientationchange event in JS
    NSString *jsTrigger = @"window.dispatchEvent(new Event('orientationchange'));";
    [self.viewController.webView evaluateJavaScript:jsTrigger completionHandler:nil];
}

5. Enable Native HTML5 Player Landscape Mode #

For the native iOS HTML5 player, make sure your <video> tag includes the playsinline attribute:

<video src="your-video.mp4" playsinline controls></video>

Combined with the AllowInlineMediaPlayback preference in config.xml, this should let the native player rotate freely with the device.

Start with isolating the plugin—it's the most likely suspect here. If that doesn't work, work through the JS and native config tweaks one by one.

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