对原生 youtube 查看事件做出反应答案

【问题标题】：react native youtube view events对原生 youtube 查看事件做出反应
【发布时间】：2018-09-11 18:54:09
【问题描述】：

我想记录用户在我使用网络视图嵌入到我的应用中的 YouTube 视频上按下播放键的时间。

我似乎找不到在用户开始播放视频时收到通知的方法。

我的 webView 的 JSX：

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{ uri: "https://www.youtube.com/embed/" + videoId }}
/>

欢迎指点

【问题讨论】：

标签： react-native webview youtube

【解决方案1】：

对于那些将来来到这里的人，我最终使用了从 webview 获取的 html 中发布的事件。

JSX：

<WebView
  style={{
    height: carouselHeight,
    width: width
  }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{
    html: youtubeHTML(videoId, width, carouselHeight)
  }}
  onMessage={event => {
    //see ./data/youtube.js to see how this event is built
    if (event.nativeEvent.data === "videoEvent_0") {
      /************ do whatever you want on the event *************/
    }
  }}
/>

youTubeHTML():

function youtubeHTML(
  videoID: string,
  width: number,
  height: number
) {
  //see https://medium.com/capriza-engineering/communicating-between-react-native-and-the-webview-ac14b8b8b91a
  const returnValue =
    `<!DOCTYPE html>
  <html>
  <head>

<meta name="viewport" content="initial-scale=1.0">
  </head>
  <body style="margin: 0px;background-color:#000;">
      <!-- 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', {
            height: '` +
    height +
    `',
            width: '` +
    width +
    `',
            videoId: '` +
    videoID +
    `',
            events: {
              'onStateChange': onPlayerStateChange
            }
          });
        }

        // 4. 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) {
          window.postMessage("videoEvent_"+JSON.stringify(event.data))
        }
      </script>
    </body>
  </html>`;
  return returnValue;
}

【讨论】：