У меня проблема с воспроизведением видео на YouTube или Instagram, обернутых внутри iframe, с использованием response-native-webview. Проблема только в Андроиде. IOS работает нормально.
Итак, когда я помещаю iframe в веб-просмотр, все выглядит нормально. Пока я не нажму кнопку воспроизведения. Видео начинает загружаться, все родные кнопки доступны, звук работает нормально, но фильм черный. Кнопки звука и стоп / воспроизведение работают.
Зависимости:
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 просто с веб-просмотром по умолчанию из response-native, хорошо работает с 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 просто включите
hardwareAccelerated=true. Тогда проблема с черным экраном будет решена.