iOS如何在退出全屏后触发视频继续播放？

Question

我正在构建一个在 iOS 中播放视频的网站。我有一个在 iOS 中工作的全屏按钮，但是在退出全屏时视频会暂停。有谁知道一种方法可以强制视频在退出全屏时继续播放，或者如何设置一个监听器来触发视频在退出全屏时自动播放？

这是我的代码：

<script>
var video = document.getElementById('tv'),
    play = document.getElementById('fullscreenbutton'),
    time;
video.addEventListener('webkitbeginfullscreen', function() {
    play.innerText = '';
    window.clearInterval(time);
});
video.addEventListener('webkitendfullscreen', function() {
    tv.autoplay();
});
play.addEventListener('touchstart', function() {
    time = window.setInterval(function() {
        try {
            video.webkitEnterFullscreen();
        }
        catch(e) {}
    }, 250);
    play.innerText = 'loading ...';
    tv.play();  


});

</script>

'''

Answer 1

当点击退出全屏模式的按钮然后恢复视频播放器时，您可以在 iOS 应用中使用 WKScriptMessageHandler。 这是我将如何处理这种情况的解决方法。

原生 iOS + JavaScript

1 Step：网站前端部分

当在您的网站上点击退出全屏按钮时，会发出一个事件，给它一个唯一的名称，例如 "exitFullScreenEvent"

2 步：iOS 应用

import WebKit

ViewController: WKScriptMessageHandler {


// Helper method to set configurations for your webView in iOS
func configureWebView() {
  ///Add the script message handler into the content controller.
    let contentController = WKUserContentController()
    /// Give it the same name as on the web front-end part
      contentController.add(self, name: "exitFullScreenEvent")
     let config = WKWebViewConfiguration()
     config.userContentController = contentController

/// Most important, when initilizing your web view pass the configuration above
let webView = WKWebView(frame: .zero, configuration: config)

// Layout/add constraints to your webView
// .....

}

// Delegate method to listen an event emitted from your website
   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

       // TODO: - Resume/ Play your video 
        
    }

}

纯网站（仅限 Javascript）

对于仅在没有任何 iOS 相关组件和 Safari 浏览器的纯 Javascript 中运行的网站，您可能需要检查此webkitjs displayingfullscreen 我以前没用过，但值得一读文档。

但另一种不费吹灰之力的解决方法是将您的视频播放器的屏幕尺寸与浏览器的窗口尺寸进行比较，即.. 检查浏览器是否为全屏，如果是，则获取全屏宽度，如果它与您的视频播放器的尺寸相同然后视频全屏显示。