Использовать YouTube Iframe API с Nativescript? - PullRequest
Новая
       8

Использовать YouTube Iframe API с Nativescript?

1 голос
/ 29 июня 2019

ОБНОВЛЕНИЕ: Из приведенного ниже кода @ Manoj и некоторых других источников я теперь могу загрузить проигрыватель YouTube в веб-представление на основе API iframe Youtube.Но все еще остается вопрос: как я могу распознавать приложение, когда само видео начинает воспроизводиться?(после загрузки видео и после воспроизведения любой рекламы).

Код ключа «захвачен» в веб-просмотре.

Существует плагин интерфейса nativescript-webview, который позволяет вамчтобы получить информацию из веб-просмотра.Если это то, что требуется здесь, какой будет правильный код для этого плагина для регистрации, когда само видео начнет воспроизводиться?

Примеры репо этого плагина кажутся довольно конкретными и отличаются от того, что я имею в виду здесь.

Оригинальный вопрос:

У меня есть приложение Nativescript, использующее iOSи угловой.Я хотел бы, чтобы видео на YouTube воспроизводились в приложении, и я хочу иметь возможность управлять воспроизведением.Поэтому я хочу сделать такие вещи, как автозапуск программы программно и зарегистрировать, когда видео действительно воспроизводится.

Как я могу это сделать?

Подробнее:

Существует плагин nativescript-youtubeplayer, но я не могу использовать его здесь, потому что он требует ключ API и некоторые другие причины.

Я могу встроить базовый iframe в WebView с кодомкак это: 

<WebView (loaded)="onWebViewLoaded($event)" requiresUserActionForMediaPlayback="false" [src]="urlSource"></WebView>

и в тс: 

 public urlSource= '<iframe src="https://www.youtube.com/embed/ZwO3PG-c5Cs?playsinline=1&autoplay=1&fs=0&controls=1&enablejsapi=1"></iframe>'

Это загружает видео.Но у него нет нормальных элементов управления YouTube (как, например, нет большой кнопки паузы на видео) - возможно, он переопределен веб-просмотром.Что еще более важно, он НЕ выполняет автозапуск , и он не дает мне способа программно получить доступ к информации iframe - поэтому, например, я не могу сказать, когда видеофактически играет против паузы.

API Iframe Player Youtube создан для этой цели, но как мне использовать его с Nativescript?Кажется, это требует манипуляций с dom так, как я раньше не видел.

Например, основной код для этого: 

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

Но, что неудивительно, это вызывает ошибки, такие как «не могу найти имя YT».

Итак, как я могу встроить видео на YouTube в Nativescript с помощью iframe и управлять им, как если бы у меня было веб-приложение?

1 Ответ

0 голосов
/ 29 июня 2019

Вы можете использовать YouTubeIframeAPI в WebView, создать отдельный локальный HTML-файл, который может содержать сценарии. 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          width: '100%',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
</body>

</html>

Образец игровой площадки

Примечание: Вы даже можете передать videoId или любой другой параметр в строке запроса, а затем проанализировать и использовать его в html-файле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...