时间戳

首页 > 解决方案 > iOS如何在退出全屏后触发视频继续播放？

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

问题描述

我正在建立一个在 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>

'''

标签： iosvideofullscreen

解决方案

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

原生 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 相关组件的纯 Javascript 中运行的网站以及在 Safari 浏览器上运行的网站，您可能需要检查这个webkitjs displayfullscreen 我以前没有使用过它，但值得阅读文档。

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

推荐阅读