我在使用 react-native-webview 播放包含在 iframe 中的 youtube 或 instagram 视频时遇到问题。问题仅在 Android 中。 IOS 运行良好。
所以,当我将 iframe 放入 webview 时,它看起来没问题。直到我点击播放按钮。视频开始加载,所有 native 按钮都可用,声音正常,但电影是黑色的。声音和停止/播放按钮有效。
依赖关系:
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> `
}}
/>
);
}
}
问题截图:
谢谢你的帮助!
最佳答案
或者,您可以简单地将 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,
},
});
关于android - Youtube iframe 视频在 react-native webview 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53450230/