【问题标题】:youtube iFrame in iOS application causes half screen to go black after full screeniOS应用程序中的youtube iFrame导致全屏后半屏变黑
【发布时间】:2020-04-30 11:45:08
【问题描述】:

我的UIViewController 中有一个WKWebView,并且我正在将一个youtube 视频(使用iFrame)与文本一起嵌入到html 中。当我启动它按预期执行的视频时,它会以全屏方式打开,我可以旋转横向,播放正常等。问题出在我关闭视频时。我的应用程序被锁定为纵向,当从视频返回时,应用程序是一半黑屏,一半是我的应用程序,并且仍然是我的一半应用程序的视图看起来是横向的(对于宽度来说太大了)。

我的应用程序被锁定在整个应用程序的Info.plist 中。我对视频旋转很好,它只会导致这个有趣的结果。

1. Launch WKWebView with youtube iframe
2. Click to launch video (video plays full screen)
3. Rotate device to either landscape rotations.
4. Close the player
This is where you notice that half the application is black and the other half looks to be portrait orientation in landscape layout.

当我检查之前和之后的视图时,它会模仿应用程序已旋转到横向模式但设备是纵向的。 (视图从 414x862 开始。在观看和旋转视频后返回到显示为 862x414 的视图)

我不太确定这里发生了什么。想法?

提前致谢

【问题讨论】:

    标签: ios swift iframe youtube


    【解决方案1】:

    我能够找到解决方法/破解/解决方案。我将我的应用程序锁定为纵向,但覆盖了 AppDelegate 方法以获得允许的方向。

    class AppDelegate: UIResponder, UIApplicationDelegate {
    
        ...
    
        func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
            return OrientationManager.allowedOrientations
        }
    
        ...
    
    }
    

    我创建了一个OrientationManager,它只是一个帮助类,允许我强制旋转并更改允许的方向。

    class OrientationManager {
        /// The currently allowed orientations of the application (default: .portrait)
        static var allowedOrientations: UIInterfaceOrientationMask = .portrait
    
        /**
         * Method to force the current orientation of the device.
         *
         * - Parameter orientation: The orientation to change to.
         *
         * - Warning: This method uses setValue(_, forKey:) which accesses values that may change in the future
         */
        static func forceOrientation(_ orientation: UIInterfaceOrientation) {
            let orientationRawValue = orientation.rawValue
            UIDevice.current.setValue(orientationRawValue, forKey: "orientation")
            UINavigationController.attemptRotationToDeviceOrientation()
        }
    }
    

    我需要做的最后一件事是弄清楚视频何时进入和退出全屏。我发现一些通知似乎在视频进入和退出全屏时可靠地触发。发生这种情况时,我启用视图旋转功能,这允许它转到全屏视频后面的横向。视频关闭后,我的视图现在(不幸地)以横向显示,然后我可以强制方向并将其重新锁定为纵向。

    UIViewController 带有webview:

    class WebViewWithVideoViewController: UIViewController {
    
        ...
        // MARK: Properties
        var videoDidFullScreenNotification: NSObjectProtocol?
        var videoDidMinimizeNotification: NSObjectProtocol?
        ...
    
        // MARK: Lifecycle
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
    
            self.beginObserving()
        }
    
        override func viewWillDisappear(_ animated: Bool) {
            super.viewWillDisappear(animated)
    
            self.endObserving()
        }
    
        // MARK: Observers
    
        func beginObserving() {
            // This is a solution to the video causing a half black screen when the device is rotated to landscape.
            // The outline of the solution is that when the video is put into full screen mode, we update the
            // available orientations to include both landscape directions. Upon the video being closed,
            // we force the device orientation back to portrait and then lock it back to portrait only.
            // This seems to work because the UIViewController is actually in landscape once complete
            // and then it animates back to the portrait orientation and seems to keep the proper ratios
            // and sizes.
            if self.videoDidFullScreenNotification == nil {
                self.videoDidFullScreenNotification = NotificationCenter.default.addObserver(
                    forName: UIWindow.didBecomeVisibleNotification,
                    object: self.view.window,
                    queue: nil
                ) { notification in
                    OrientationManager.allowedOrientations = .allButUpsideDown
                }
            }
    
            if self.videoDidMinimizeNotification == nil {
                self.videoDidMinimizeNotification = NotificationCenter.default.addObserver(
                    forName: UIWindow.didBecomeHiddenNotification,
                    object: self.view.window,
                    queue: nil
                ) { notification in
                    OrientationManager.forceOrientation(.portrait)
                    OrientationManager.allowedOrientations = .portrait
                }
            }
        }
    
        func endObserving() {
            if let videoDidFullScreenNotification = self.videoDidFullScreenNotification {
                NotificationCenter.default.removeObserver(videoDidFullScreenNotification)
            }
    
            if let videoDidMinimizeNotification = self.videoDidMinimizeNotification {
                NotificationCenter.default.removeObserver(videoDidMinimizeNotification)
            }
        }
    
        ...
    }
    

    这似乎解决了在嵌入视频进入和退出全屏后屏幕显示半黑的问题。不幸的是,当您从全屏视频返回时,会有一个轻微的动画,但对于一个非常奇怪的错误来说,这是一个小小的牺牲。

    希望这可以帮助其他人解决这个(或类似的问题)和快乐的编码!

    【讨论】:

      猜你喜欢
      • 2012-10-31
      • 2018-07-14
      • 2012-11-08
      • 2012-06-05
      • 2023-03-28
      • 1970-01-01
      • 1970-01-01
      • 2017-03-24
      • 2018-02-17
      相关资源
      最近更新 更多