Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webView props mediaPlaybackRequiresUserAction not work #648

Open
9 of 15 tasks
Aromxyz opened this issue Nov 7, 2023 · 2 comments
Open
9 of 15 tasks

webView props mediaPlaybackRequiresUserAction not work #648

Aromxyz opened this issue Nov 7, 2023 · 2 comments
Labels
bug Crush'em all.

Comments

@Aromxyz
Copy link

Aromxyz commented Nov 7, 2023

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 Aromxyz added the bug Crush'em all. label Nov 7, 2023
@Aromxyz
Copy link
Author

Aromxyz commented Nov 7, 2023

@jsamr

@Aromxyz
Copy link
Author

Aromxyz commented Nov 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Crush'em all.
Projects
None yet
Development

No branches or pull requests

1 participant