Youtube iframe 视频在 react-native webview 中不起作用

Question

我在使用 react-native-webview 播放包含在 iframe 中的 youtube 或 instagram 视频时遇到问题。问题仅在 Android 中。 IOS 工作正常。

所以，当我将 iframe 放入 webview 时，它看起来没问题。直到我点击播放按钮。视频开始加载，所有本机按钮都可用，声音正常，但电影是黑色的。声音和停止/播放按钮工作。

依赖项：

react-native-cli: 2.0.1
react-native: 0.57.5
"react-native-webview": "^2.12.1"

我准备了视频不起作用的简单演示：

  render() {
    return (
      <WebView
        originWhitelist={['*']}
        useWebKit={false}
        source={{
          html: `
          XX
          <div>
            <iframe width="320" height="240" src="https://www.youtube.com/embed/li8yILhFFZM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
          </div> `

        }}
      />

    );
  }
}

问题截图：

谢谢你的帮助！

Answer 1

或者你可以简单地使用 URI 和来自 react-native 的默认 webview，适用于 android.

   <View style={styles.cardRounded}>
    <WebView
      mediaPlaybackRequiresUserAction={true}
      style={{ height:240, width:320,alignSelf:"center",alignContent:"center"}}
      source={{uri: 'https://www.youtube.com/embed/li8yILhFFZM?rel=0' }}
    />
   </View>

let styles = StyleSheet.create({
    cardRounded: {
        paddingEnd:0,  paddingTop: 0 , paddingBottom: 0, paddingStart: 0, padding:0,
        borderRadius: 12, alignItems:"center", backgroundColor:#000000,flex:0, height:240,
    },

});

Answer 2

对我来说设置

androidLayerType="hardware"

完成了工作

<WebView
  // ...
  androidLayerType="hardware" // <-- Add this.
  // ...     
/>

但是，我不得不在

./android/app/src/main/AndroidManifest.xml

（如果存在）的活动中删除android:hardwareAccelerated="false"。

PS：这确实会导致应用程序在包含 iFrame 的屏幕上随机关闭导航。

P.P.S.：查看此issue了解更多信息。