search

meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

react native render-html video display #548

Closed Raynier98 closed 2 years ago

Raynier98 commented 2 years ago

Decision Table

Good Faith Declaration

Description

hello i have a problem with render-html

I have a news app, which is receiving information from a web page. As usual, the posts have content such as images and videos. everything is fine with the images, but with youtube videos or similar, it only shows the cover photo.

I would like the videos to be able to play normally.

this is my code:

<HTML 
   source={{html:post.content}} 
   tagsStyles={tagStyles} 
   contentWidth={contentWidth}
   onPress = {(event, href)=>{
   Linking.openURL(href)
   }}
/>

and this is an example of the tags I receive:

<div  id="_ytid_80279"  width="800" height="450"  data-origwidth="800" data-origheight="450" data-facadesrc="https://www.youtube.com/embed/7wiINdmIJl4?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=1&#038;rel=0&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;" class="__youtube_prefs__ epyt-facade epyt-is-override  no-lazyload" data-epautoplay="1" ><img class="epyt-facade-poster" loading="lazy"  alt="YouTube player"  src="https://i.ytimg.com/vi/7wiINdmIJl4/maxresdefault.jpg"  /><button class="epyt-facade-play" aria-label="Play"><svg data-no-lazy="1" height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></div>
</div>

Warnin that i receive:

React Native Information

The "button" tag is a valid HTML element but is not handled by this library. You must extend the default HTMLElementModel for this tag with "customHTMLElementModels" prop and make sure its content model is not set to "none".

RNRH Version

react-native-render-html: ^6.3.4

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

not have

Additional Notes

I was looking for information and I did not find content that can help me. im new in react native and i appreciate your help

ss of how the cover of the video looks

Captura de Pantalla 2022-01-31 a la(s) 3 45 06 p m

p

jsamr commented 2 years ago

@Raynier98 This library doesn't support JavaScript execution, which your youtube player likely requires. Think of it as a noscript static web page renderer. However, you could use custom rendering techniques to customize how some tags should be rendered, and use a third party library to do so. I will not give the complete answer here, as it will be very dependent on the specific HTML shape you're rendering. Good luck with it! You can also get inspiration from this video custom render.