Skip to content
This repository was archived by the owner on Sep 21, 2026. It is now read-only.
This repository was archived by the owner on Sep 21, 2026. It is now read-only.

webView props mediaPlaybackRequiresUserAction not work #648

Description

@Aromxyz

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

Description

I used react-native-render-html to render my html richText, it's contain 'video' tag, and when load success the HTML,the video autoplay, and I set the props mediaPlaybackRequiresUserAction = true, is not work.

import WebView from "react-native-webview";
import RenderHtml, {IGNORED_TAGS} from 'react-native-render-html';

 const htmlContent =
        '<video class="ql-video" frameborder="0" allowfullscreen="true" src="https://feedbacksz.youxuepai.com/feedback-manage/20231017/901111b8da0bd6483142ebc196beae1c.mp4" sandbox="" preload="none" controls="true" autoplay="false" title="视频"></video><p>阿三大苏打撒旦</p>';
<RenderHtml
                  key={'html' + replyList[i]?.id.toString()}
                  contentWidth={PHONE_SIZE.width - 40}
                  source={{html: htmlContent}}
                  ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}
                  WebView={WebView}
                  defaultWebViewProps={{
                    androidLayerType: "software",
                    mediaPlaybackRequiresUserAction: true,
                  }}
                  staticContentMaxWidth={PHONE_SIZE.width - 40}
                  alterChildren={node => {
                    if (node.name === "iframe" || node.name === "img" || node.name === 'video') {
                      delete node.attribs.width;
                      delete node.attribs.height;
                    }
                    return node.children;
                  }}
                  renderersProps={{
                     video: {
                       webViewProps: {
                        mediaPlaybackRequiresUserAction: true,
                        allowsInlineMediaPlayback: false,
                       }
                     }
                  }}
                  onLinkPress={(event, href, htmlAttribs) => {
                    navigationService.navigate('BaseWebViewPage', {url: href, hasBar: true})
                  }}
                  renderers={{
                  
                    video: (htmlAttribs, children, convertedCSSStyles, passProps) => {
                      return <View key={passProps.key}
                                   style={{width: "100%", aspectRatio: 16.0 / 9.0, marginTop: 16, marginBottom: 16,opacity: 0.99}}>
                        <WebView
                            source={{uri: htmlAttribs.src}}
                            style={{flex: 1, width: "100%", aspectRatio: 16.0 / 9.0}}
                            mediaPlaybackRequiresUserAction={true}
                            scalesPageToFit={true}
                            javaScriptEnabled={true}
                            domStorageEnabled={true} 
                            scrollEnabled={false}
                        />
                      </View>
                    }
                  }}
              />

pls help me. what should I do.

React Native Information

react-native:0.59.2

RNRH Version

5.0.0

Tested Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Reproduction Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Minimal, Reproducible Example

none

Additional Notes

none

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugCrush'em all.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions