Question

我正在尝试从YouTube播放视频，并通过YT.API获取当前时间。

视频可以成功播放，并且HTML内容也可以正常工作

但是我无法弄清楚如何从该webView元素中获取数据。

我想知道来自webView的事件，这是我的代码：

<template>
<Page @loaded=pageLoaded>
    <GridLayout>
        <web-view id="webView"></web-view>
    </GridLayout>
</Page>
</template>

let webViewInterfaceModule = require('nativescript-webview-interface');

@Component 

export default class someComponent extends Vue {

    oWebViewInterface;

    pageLoaded(args){
        let page = args.object;
        this.setupWebViewInterface(page);
    }

    setupWebViewInterface(page){

        let webView = page.getViewById('webView');
        this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, this.html);

        this.oWebViewInterface.on( '*', function(eventData){
            console.log("some change!!"); // but never fires!
        });

    }
}

并且我将this.html定义为：

html = `
    <!DOCTYPE html>
    <html>
    <body>
        <div id="player"></div>
        <script>

            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                height: '280',
                width: '100%',
                videoId: 'k3On6DLPGLA',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
                });
            }

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            var done = false;
            function onPlayerStateChange(event) {
                console.log("state changed!"); // it fires!
            }

            function stopVideo() {
                player.stopVideo();
            }

    <\/script>
    <\/body>
    <\/html>
`;

但是我得到这样的结果：

chromium: [ERROR:web_contents_delegate.cc(224)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
chromium: [INFO:CONSOLE(35)] "state changed!", source: ..../ (35)

Answer 1

好，我得到了答案：

这里有一些问题：

＃1。植入nativescript-webview-interface.js：

我需要复制此文件：

cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/assets/www/lib/

＃2。权限！

但是＃1导致另一个问题：net::ERR_ACCESS_DENIED

为解决这一问题，我添加了这一点：

setupWebViewInterface(page){
    let webView = page.getViewById('webView');
    webView.android.getSettings().setAllowFileAccess(true);
}

现在我可以访问该文件夹了，所以我将this.html可变内容移动到了一个新文件：/assets/www/index.html

＃3。设置src

因为现在我们可以访问该文件夹，所以我们需要（重新）设置Web视图的src，因此我将其添加到setupWebViewInterface函数中：

this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface( webView, '~/assets/www/index.html' );

注意：我从<webView />中删除了src，因为它会引起问题！（如果新旧src相同，则不会重新加载！）

＃4。定义变量：

在html文件中，我需要添加以下行：

var oWebViewInterface = window.nsWebViewInterface;

＃5。定义监听器：

我添加一个：oWebViewInterface.emit('anyEvent', event); 在此函数中：

function onPlayerStateChange(event) {
    console.log("state changed!");
    oWebViewInterface.emit('anyEvent', event);
}

现在可以使用了：）

在WebView上设置侦听器| nativescript + vue

1 个答案: