Question

我知道这是一个记录很多的问题，我一直在努力寻找解决方案，但到目前为止我在网上找到的所有内容都没有用。所以我想展示我试图做的和出了什么问题：

我尝试在网络视图中嵌入Youtube视频。以下方法成功构建应用程序，但是当我单击视频时，应用程序崩溃。我理解这适用于IOS，但我正在测试在Android模拟器上构建应用程序

<WebView
    style={ styles.video }
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri: 'https://www.youtube.com/embed/dFKhWe2bBkM' }}
/>

我尝试的另一种方法就是这样，但是我收到了错误。

<WebView
    style={ styles.video }
    javaScriptEnabled={true}
    source={{ html: "<html><body><iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>"  }}
/>


error: bundling failed: SyntaxError in C:\DIRECTORY\VideoPage.js: C:/DIRECTORY/VideoPage.js: Unexpected token, expected , (33:56)
31 |               style={ styles.video }
32 |               javaScriptEnabled={true}
> 33 |             source={{ html: "<html><body><iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>"  }}
 |                                                         ^
34 |             />
35 |
36 |           </View>

感谢任何帮助。

谢谢

Answer 1

https://github.com/inProgress-team/react-native-youtube

import YouTube from 'react-native-youtube'

<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false
  fullscreen={true}       // control whether the video should play in fullscreen or inline
  loop={true}             // control whether the video should loop when ended

  onReady={e => this.setState({ isReady: true })}
  onChangeState={e => this.setState({ status: e.state })}
  onChangeQuality={e => this.setState({ quality: e.quality })}
  onError={e => this.setState({ error: e.error })}

  style={{ alignSelf: 'stretch', height: 300 }}
/>

Answer 2

在将此HTML代码包装在“”中时，必须在iframe标记的属性中使用“”。

像这样：

<WebView
javaScriptEnabled={true}
source={{ html: "<html><body><iframe width='560' height='315' src='https://www.youtube.com/embed/RJa4kG1N3d0' frameborder='0' allowfullscreen></iframe></body></html>" }}
/>

在反应原生应用程序中嵌入Youtube视频

2 个答案: