iOS如何退出全屏后触发视频以继续播放? [英] iOS How to trigger video to keep playing after exiting fullscreen?

问题描述

我正在建立一个在iOS中播放视频的网站.我在iOS中有一个全屏按钮，但是退出全屏时视频会暂停.有谁知道一种方法来强制视频在退出全屏模式后继续播放，或者如何设置侦听器以在退出全屏模式时触发视频自动播放?

I'm building a website that plays video in iOS. I have a fullscreen button working in iOS however the video pauses when exiting fullscreen. Does anyone know a way to either force the video to continue to play upon exiting fullscreen or how to set up a listener that triggers the video to autoplay upon exiting fullscreen?

这是我的代码:

<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>

'''

推荐答案

点击退出全屏模式的按钮，然后恢复视频播放器，即可在iOS应用中使用WKScriptMessageHandler. 这是有关如何处理这种情况的解决方法.

You can use WKScriptMessageHandler in your iOS app when a button to exit fullscreen mode is tapped then resume your video player. Here is a workaround on how I would handle this situation.

本地iOS + JavaScript

1步骤:网站前端部分

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

When exit full screen button is tapped on your website emit an event give it a unique name something like "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)

仅对于运行在纯Javascript中且没有任何iOS相关组件且在Safari浏览器上运行的网站，您可能需要检查此

For website only which runs in pure Javascript without any iOS related components and on Safari browser you might want to check this webkitjs displayingfullscreen I Haven't used it before but it worth reading the doc.

但是另一种无需费力的解决方法是将视频播放器的屏幕大小与浏览器窗口大小进行比较，即检查浏览器是否为全屏，如果与浏览器大小相同则获得全屏宽度视频就全屏显示了.

But another work around without putting lots of effort is to compare your video player's screen size with the browsers window size ie.. check if browser is full screen if so get the full screen width if it's the same with your video player's size then video is in full screen.

这篇关于iOS如何退出全屏后触发视频以继续播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！