Question

我想记录用户在使用网络视图在我的应用中嵌入的youTube视频上播放时的效果。

我似乎找不到在用户启动视频时收到通知的方法。

我的webView的JSX：

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

赞赏任何指针

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

反应原生youtube视图事件

1 个答案: