React-native-render-html: Support <video> tag

Created on 19 Apr 2018 · 7Comments · Source: meliorence/react-native-render-html

Is this a bug report or a feature request?

This is a Feature request.

Currently video tag is not supported.. if somehow in renders we get parsed children.. we can render..

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both.

Is the bug reproductible in a production environment (not a debug one)?

Yes.

Have you been able to reproduce the bug in the provided example?

Yes.

Environment

Environment:
React: 16.3.1
React native: 0.55.3
react-native-render-html: 3.9.3

Expected Behavior

Video component should be rendered..

Reproducible Demo

new feature

Source

Pradeet

Most helpful comment

ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}

Worked for me, but I used a WebView to show the video:

<HTML 
    onLinkPress={ (event, linkUrl) => { Linking.openURL(linkUrl); } }
    ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}
    renderers={{ 
        iframe: (htmlAttribs, children, convertedCSSStyles, passProps) => {
            return <View key={passProps.key} style={{ width: "100%", aspectRatio:16.0/9.0, marginTop:16, marginBottom:16 }}><WebView
                scrollEnabled={false}
                source={{ uri: htmlAttribs.src }}
                style={{ flex: 1, width: "100%", aspectRatio: 16.0 / 9.0 }}
            /></View> 
        },

        video: (htmlAttribs, children, convertedCSSStyles, passProps) => {
            return <View key={passProps.key} style={{ width: "100%", aspectRatio:16.0/9.0, marginTop:16, marginBottom:16 }}><WebView
                scrollEnabled={false}
                source={{ uri: htmlAttribs.src }}
                style={{ flex: 1, width: "100%", aspectRatio: 16.0 / 9.0 }}
            /></View> 
        }                                    
    }}
/>

It also requires that video tag contains "src" attribute! Otherwise, you could check children content to get src from source children inner tag.

FabrizioCaldarelli on 13 Dec 2019

👍8 ❤3 🚀2

All 7 comments

jerearaujo03 on 27 Jul 2018

HI! Ive tried to implement custom renderer with

<HTML
    containerStyle={styles.content}
    html={description}
    renderers={{
       video: ({ src }) => (
          <Video
             style={{ width: Dimensions.get('window').width - 30 }}
             source={{ uri: src }}
           />
        ),
     }}
/>

My workaround is to use change video tag with videos and format input html string

RageOfJustice on 15 Nov 2018

👍1

Yeah that would work... but still a work around... we need not have to filter it out, just ignore it and pass down its children.

Pradeet on 21 Nov 2018

1: you need to set the height of the video!
2: get rid of 'video' and 'source' in IGNORED_TAGS in file react-native-render-html/src/HTMLUtils.js
about line 44,

Djinne on 22 Nov 2018

For render video I just remove video tag from ignoredTags list

import Video from 'react-native-video'
import HTMLView from 'react-native-render-html'
import { IGNORED_TAGS } from 'react-native-render-html/src/HTMLUtils'

<HTMLView
    html={content}
    renderers={{
      video: ({ src }) => (
        <Video source={{ uri: src }} />
      ),
    }}
    ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}
  />

oleksii-lyhun on 15 Oct 2019

👍1

This work around doesn't seem to be working. Anyone else have better luck?

Beissner on 13 Nov 2019

ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}

Worked for me, but I used a WebView to show the video:

<HTML 
    onLinkPress={ (event, linkUrl) => { Linking.openURL(linkUrl); } }
    ignoredTags={IGNORED_TAGS.filter(tag => tag !== 'video')}
    renderers={{ 
        iframe: (htmlAttribs, children, convertedCSSStyles, passProps) => {
            return <View key={passProps.key} style={{ width: "100%", aspectRatio:16.0/9.0, marginTop:16, marginBottom:16 }}><WebView
                scrollEnabled={false}
                source={{ uri: htmlAttribs.src }}
                style={{ flex: 1, width: "100%", aspectRatio: 16.0 / 9.0 }}
            /></View> 
        },

        video: (htmlAttribs, children, convertedCSSStyles, passProps) => {
            return <View key={passProps.key} style={{ width: "100%", aspectRatio:16.0/9.0, marginTop:16, marginBottom:16 }}><WebView
                scrollEnabled={false}
                source={{ uri: htmlAttribs.src }}
                style={{ flex: 1, width: "100%", aspectRatio: 16.0 / 9.0 }}
            /></View> 
        }                                    
    }}
/>

It also requires that video tag contains "src" attribute! Otherwise, you could check children content to get src from source children inner tag.

FabrizioCaldarelli on 13 Dec 2019

👍8 ❤3 🚀2

Was this page helpful?

0 / 5 - 0 ratings