meliorence/react-native-render-html

webView props mediaPlaybackRequiresUserAction not work

Aromxyz opened this issue · 2 comments

Aromxyz commented

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

Aromxyz commented

when I use Webview to replace react-native-render-html, the props mediaPlaybackRequiresUserAction = {true} works,
and now I use react-native-video to render the video tag.