React Native WebView嵌入YouTube视频，如何监听播放事件？

我之前也碰到过类似的需求，要捕获YouTube视频的播放操作，核心得靠YouTube的iframe JavaScript API配合WebView的消息通信机制来实现。下面是具体的解决步骤和代码示例：

步骤1：启用YouTube的JavaScript API #

首先，你需要在YouTube的embed链接后追加enablejsapi=1参数，这样才能通过JS脚本和播放器交互：

const embedUrl = `https://www.youtube.com/embed/${videoId}?enablejsapi=1`;

步骤2：注入自定义监听脚本 #

通过WebView的injectJavaScript属性，注入一段脚本用来加载YouTube的API、初始化播放器并监听播放状态：

const injectPlayListener = `
  // 初始化YouTube播放器实例
  function onYouTubeIframeAPIReady() {
    const player = new YT.Player('player', {
      events: {
        'onStateChange': handlePlayerStateChange
      }
    });
  }

  // 监听播放器状态变化
  function handlePlayerStateChange(event) {
    // YT.PlayerState.PLAYING对应的状态值是1
    if (event.data === 1) {
      // 向React Native发送播放事件消息
      window.ReactNativeWebView.postMessage('video_play_triggered');
    }
  }

  // 动态加载YouTube的iframe API脚本
  const scriptTag = document.createElement('script');
  scriptTag.src = 'https://www.youtube.com/iframe_api';
  document.head.appendChild(scriptTag);
`;

步骤3：在WebView中接收消息并处理 #

给WebView添加onMessage属性，接收来自网页的消息，然后执行你的播放记录逻辑：

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  source={{ uri: embedUrl }}
  injectJavaScript={injectPlayListener}
  onMessage={(event) => {
    if (event.nativeEvent.data === 'video_play_triggered') {
      // 这里写你的播放记录逻辑，比如上报统计、更新状态等
      console.log('用户触发了视频播放');
      // 示例：调用你的记录函数
      // recordPlayAction(videoId);
    }
  }}
/>

额外注意事项 #

• 确保你使用的是官方的react-native-webview库（而非旧的内置WebView），这些API在新版本中才稳定支持。
• 如果需要区分用户手动点击播放和自动播放，可以额外监听播放器的初始状态，结合用户交互事件来判断（不过YouTube API本身没有直接区分的字段，需要自己做逻辑处理）。
• iOS和Android平台上的WebView消息通信逻辑基本一致，但如果遇到兼容性问题，可以检查allowUniversalAccessFromFileURLs（Android）或allowsInlineMediaPlayback（iOS）等属性是否配置正确。

内容的提问来源于stack exchange，提问作者otusweb