如何在WebView React Native中禁用自动播放

Question

如何在WebView React Native中禁用自动播放。因为当我添加"mediaPlaybackRequiresUserAction={false}"时，我尝试WebView在我的应用程序中播放视频。我下面的代码：

<WebView style={{ justifyContent: 'center', alignItems: 'center'}} source={{uri: url}} mediaPlaybackRequiresUserAction={false} />

请帮帮我，谢谢。

Answer 1

您需要更改属性mediaPlaybackRequiresUserAction={true}。然后它将停止自动播放。

Answer 2

使用HTML就成功了。

<WebView
{...this.props}
onError={this.onError}
source={{
html: `
<video width="100%" height="100%" style="background-color:${styles.webView.backgroundColor}" controls>
<source src="${this.props.uri}" type="video/mp4">
</video>
`,
}}
style={this.props.style || styles.webView}
/>

https://stackoverflow.com/a/31956633/1958882

Answer 3

这个在Android中对我有效(还没有在iOS上测试(：

<View flex height={300}>
<WebView
source={{ uri: url }}
style={{ flex: 1.0 }}
mediaPlaybackRequiresUserAction={true}
allowsInlineMediaPlayback={true}
javaScriptEnabled={true}
allowsFullscreenVideo={true}
domStorageEnabled={true}
injectedJavaScript={`
document.getElementsByTagName("video")[0].removeAttribute("autoplay"); // this one was the key for me!
`}
allowFileAccess={false}
startInLoadingState={true}
startInLoadingState={<Loaders.spinner />}
/>