（続き）playlistを再生する - JavaScriptからReactまで

iFrame.jsで、

PLAYボタンの作成のところで、

　 player.playVideo()を、

player.loadPlaylist(playlist:String|Array)に書き換える。
ここに、YOUTUBE動画のＩＤの配列をいれておけば再生可能。

次は、YoutubeIDの配列データを渡せば、そのリストを再生してくれるようにしたいと思います。

下記のように配列を渡せばできるようにするには、

<SafeAreaView style={styles.container}>
      <View style={{width: windowWidth,height: windowHeight*2/3}}>
        <WebView
          ref={webRef}
          source={{html: buildHTML('["ZOcRPQ7zGb0","s7WQ-q_L5OI"]')}}
          allowsFullscreenVideo={false}
          allowsInlineMediaPlayback
          scalesPageToFit={false}
          mediaPlaybackRequiresUserAction={false}
        />
      </View>
      <View>
        <TouchableOpacity
           onPress={playVideo}>
          <Text>PLAY</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>

iFrame.jsを下記のように変更します。

import {Dimensions} from 'react-native';

const {width} = Dimensions.get('window');

const buildIFrame = videoId => `
    <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: '100%',
              width: ${width},
              playerVars: {
                'autoplay':1,
                'playsinline': 1,
                'modestbranding': 1,
                'controls': 1,
                'rel': 0,
              },
            });
            MessageInvoker.postMessage('YouTube has loaded');
          }

          function pause() {
            player.pauseVideo();
          }
          function play() {
            player.loadPlaylist(${videoId});
          }
          function seekTo(time) {
            player.seekTo(time, true);
          }
          function getDuration() {
            return player.getDuration()
          }
          function getCurrentTime() {
            return player.getCurrentTime()
          }
        </script>
`;

const iFrameStyle = `
  <style>
    html {
      overflow-y: hidden;
      overflow-x: hidden;
      height: 100%;
    }
    body {
      background-color: black;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
`;

export const buildHTML = videoId => `
        <!DOCTYPE html>
        <html>
          <head>
            ${iFrameStyle}
            <meta name="viewport" content="initial-scale=1">
            <title>Navigation Delegate Example</title>
          </head>
          <body>${buildIFrame(videoId)}</body>
        </html>
`;




iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google for Developers

コントロールバーの表示とオートプレイ

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('player', {
    videoId: 'M7lc1UVf-VE',
    playerVars: { 'autoplay': 1, 'controls': 1 },
    events: {
      'onReady': onPlayerReady,
      'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}