Видео iframe на YouTube не работают - PullRequest
Новая
       11

Видео iframe на YouTube не работают

0 голосов
/ 23 ноября 2018

У меня проблема с воспроизведением видеороликов на YouTube или Instagram, помещенных в iframe с использованием response-native-webview.Проблема только в Android.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> `

        }}
      />

    );
  }
}

и скриншот проблемы:

enter image description here

Спасибо за помощь!

1 Ответ

0 голосов
/ 03 января 2019

В качестве альтернативы вы можете использовать URI просто с веб-просмотром по умолчанию от реактивного-родного, хорошо работает с 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,
    },

});
...