Question

“我的应用”是带有外部控制器的youtube视频播放器。从使用iframe api的react-native-webview html代码导入YouTube视频。

<WebView
   ref={this.onRef}
   originWhitelist={['*']}
   javaScriptEnabled
   domStorageEnabled
   onMessage={this.onListenMessage}
   source={YTsource(YTid, YOUTUBE_HEIGHT)}
/>

YTsource = (YTid, height) => { 
   {
  html: `<html>
<style type="text/css">    
    html, body {
        margin: 0;
        padding: 0;
        position: relative;
    }
</style>

<head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
</head>

<body>
    <div id="player"></div>
</body>

<script type="text/javascript">
    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;
    var timerId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: '${videoId}',
            height: ${height},                                                                                                                                                                                             
            width: '100%',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError,
            },
            playerVars: {
                rel: 0,
                disablekb: 1
            }
        });
    }

    function onPlayerReady(event) {
        player.unloadModule("captions");
        player.setOption("captions", "track", {"languageCode": "es"});
        event.target.setVolume(100);
    }

    function onPlayerStateChange(event) {
        clearTimeout(timerId);

        switch (event.data) {
            case YT.PlayerState.UNSTARTED:
                onStateChange("UNSTARTED");
                return;
                break;

            case YT.PlayerState.ENDED:
                onStateChange("ENDED");
                break;

            case YT.PlayerState.PLAYING:
                onStateChange("PLAYING");
                timerId = setInterval(function () {
                    setCurrentSeconds();
                }, 100);
                return;
                break;

            case YT.PlayerState.PAUSED:
                onStateChange("PAUSED");
                return;
                break;

            case YT.PlayerState.BUFFERING:
                onStateChange("BUFFERING");
                return;
                break;

            case YT.PlayerState.CUED:
                onStateChange("CUED");
                return;
                break;
        }
    }

    .....

}

几乎视频没有问题，但是像VEVO这样的音乐视频（https://www.youtube.com/watch?v=mw5VIEIvuMI）发生了“视频不可用”的错误。

我发现了为什么这些视频由于其音乐属性而无法正常播放。因此，必须插入受保护的域，例如“ https://www.youtube.com”。

在Youtube iframe api文档中，解决此问题的方法是在playerVars值中添加'origin'参数，但不适用于我的情况。

在iOS中，我解决了react-native-youtube使用origin参数的问题。但是在android系统中，此模块执行了太多错误，并且不支持iOS等原始参数。

我不能只使用 <WebView source={{ uri: 'https://www.youtube.com/embed/...' }, { Preferrer: '${origin}' }} /> 因为必须在网络视图之外控制youtube视频...

在我的案例中，请提供任何解决YouTube音乐资产的建议。谢谢。

Vevo Youtube视频是否可以嵌入到react-native android webview html中？

0 个答案: