Есть ли способ, чтобы Vevo Youtube Videos вставлял в реагирующий на родной андроид webview html?

Мое приложение представляет собой видеоплеер YouTube с внешним контроллером. Импорт видео с YouTube из кодатрека-родного веб-просмотра html для использования iframe api.

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

    .....

}

Почти у видео нет проблем, но у музыкальных видео ( https://www.youtube.com/watch?v=mw5VIEIvuMI), таких как VEVO, произошла ошибка "Видео недоступно".

Я обнаружил, почему эти видео не могут воспроизводиться нормально из-за их музыкального свойства. Поэтому необходимо вставить защищенный домен, например " https://www.youtube.com/".

В документации iframe api Youtube, способ решения этой проблемы, который добавляет параметр 'origin' в значение playerVars, но в моем случае это не работает.

В iOS я решил использовать параметр origin -native-youtube. Но android, этот модуль выполняет слишком много ошибок, а также не поддерживает параметр источника, как iOS.

Я не могу использовать только <WebView source={{ uri: 'https://www.youtube.com/embed/...' }, { Preferrer: '${origin}' }} />потому что должен контролировать YouTube видео за пределами веб-просмотра...

Пожалуйста, любые советы, чтобы решить музыкальную собственность Youtube в моих случаях. Спасибо.

Источник

0 ответов

Другие вопросы по тегам