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

Question

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

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

请帮帮我，谢谢。

Answer 1

这个在 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 />}
     />

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

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