iOS应用程序的WKWebView中不会触发onYouTubeIframeAPIReady

时间:2019-10-22 18:19:55

标签: swift youtube embed wkwebview

我试图确保用户在转到下一屏幕之前已经观看了整个YouTube视频。

我从SO的另一个响应中得到了这个设计,在这里我可以看到实际播放了多少视频。问题是,我仅收到“外面的#####!”的通知。处理程序。

所有其他发送的消息均无效,因为(我认为)从未执行过 onYouTubeIframeAPIReady 函数。

这是一个生动的示例,效果很好:http://jsfiddle.net/sg6zkrmp/

所以我不明白为什么它在这里对我不起作用。

   func setUpUI() {
        let js = """
            var player, timer, timeSpent = [], display = document.getElementById('display');

            function onYouTubeIframeAPIReady() {
                window.webkit.messageHandlers.clickListener.postMessage('API Ready!');
                player = new YT.Player( 'player', {
                    events: { 'onStateChange': onPlayerStateChange }
                });
            }

            function onPlayerStateChange(event) {
                window.webkit.messageHandlers.clickListener.postMessage('a change occurred');
                if(event.data === 1) { // Started playing
                    if(!timeSpent.length){
                        for(var i=0, l=parseInt(player.getDuration()); i<l; i++) timeSpent.push(false);
                    }
                    timer = setInterval(record,100);
                } else {
                    clearInterval(timer);
                }
            }

            function record(){
                window.webkit.messageHandlers.clickListener.postMessage('Recording!');
                timeSpent[ parseInt(player.getCurrentTime()) ] = true;
                showPercentage();
            }

            function showPercentage(){
                var percent = 0;
                for(var i=0, l=timeSpent.length; i<l; i++){
                    if(timeSpent[i]) percent++;
                }
                percent = Math.round(percent / timeSpent.length * 100);
                window.webkit.messageHandlers.clickListener.postMessage('Give me that percentage!!');
            }
            window.webkit.messageHandlers.clickListener.postMessage('##### Outside!');
        """
        let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: false)

        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsInlineMediaPlayback = true
        webConfiguration.userContentController.addUserScript(script)
        webConfiguration.userContentController.add(self, name: "clickListener")
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.backgroundColor = .red

     .......

        let html = """
           <iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
           <p id="display"></p>
        """
        webView.loadHTMLString(html, baseURL: nil)
    }
    .......
       func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)
    {
        print("------> ", message.body)
    }
}

顺便说一句,加载视图时,我可以看到多次打印的消息,而不是一次:

------>  ##### Outside!
------>  ##### Outside!
------>  ##### Outside!
------>  ##### Outside!
------>  ##### Outside!
------>  ##### Outside!

1 个答案:

答案 0 :(得分:0)

好吧,我为有兴趣的人买了它。我只需要将其添加到我的html中:

let html = """
           <script src="https://www.youtube.com/iframe_api"></script>
           <iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1&controls=0&playsinline=1"></iframe>
           <p id="display"></p>
        """

现在它可以正常工作了。