Video.js: Is there any support for react-native?

Created on 30 Nov 2017 · 8Comments · Source: videojs/video.js

Source

anirban2015

Most helpful comment

I currently have a temporary solution with react native / expo where I just wrap the player experience in a WebView. This seems to be working surprisingly well - much better than the offering provided by the Expo stack. I'll need to do some more testing but here's what I have so far:

HTML:

<head>
    <link href="http://vjs.zencdn.net/6.4.0/video-js.css" rel="stylesheet">

    <style>
        body {
            background-color: black;
            margin: 0;
        }
    </style>
</head>

<body>

    <div>
        <video id="my-player" class="video-js vjs-big-play-centered vjs-fill" controls preload="auto" data-setup='{"fluid": false, "controlBar": { "fullscreenToggle": false }}'>

            <source src="https://ridrstorage.blob.core.windows.net/temp/ridr.mp4" type="video/mp4"></source>

            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">55555555
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>

    <script src="http://vjs.zencdn.net/6.4.0/video.js"></script>
</body>

render method in React Native Component:

render() {
    return (
        <Container style={styles.container}>
            <StatusBar hidden={true} />
            <View style={{flex: 1 }}>
                <View style={[{flex: 1}, StyleSheet.absoluteFill]}>
                    <WebView allowsInlineMediaPlayback={true} style={{}} source={require("../../../assets/html/player.html")}>
                    </WebView>
                </View>
            </View>

        </Container>
    );
}

Note that I'm directly mimicking a full screen experience here - the full screen button didn't work on Android, so this is what I ended up with. So far, the experience seems to work nice, but I don't know how "hacky" that solution is given that I'm very, very new to RN.

hardcodet on 17 Dec 2017

👍2

All 8 comments

We haven't tested it and I'm not sure it would work. From what I understand react-native doesn't run a webview like things like phonegap and Video.js does currently depend on a browser environment (it won't throw if you require it in nodejs, though, it won't do anything either).
If someone has tried video.js and react-native, please chime in.

gkatsev on 30 Nov 2017

👍1

HTML:

<head>
    <link href="http://vjs.zencdn.net/6.4.0/video-js.css" rel="stylesheet">

    <style>
        body {
            background-color: black;
            margin: 0;
        }
    </style>
</head>

<body>

    <div>
        <video id="my-player" class="video-js vjs-big-play-centered vjs-fill" controls preload="auto" data-setup='{"fluid": false, "controlBar": { "fullscreenToggle": false }}'>

            <source src="https://ridrstorage.blob.core.windows.net/temp/ridr.mp4" type="video/mp4"></source>

            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">55555555
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>

    <script src="http://vjs.zencdn.net/6.4.0/video.js"></script>
</body>

render method in React Native Component:

render() {
    return (
        <Container style={styles.container}>
            <StatusBar hidden={true} />
            <View style={{flex: 1 }}>
                <View style={[{flex: 1}, StyleSheet.absoluteFill]}>
                    <WebView allowsInlineMediaPlayback={true} style={{}} source={require("../../../assets/html/player.html")}>
                    </WebView>
                </View>
            </View>

        </Container>
    );
}

hardcodet on 17 Dec 2017

👍2

WebView on Android basically doesn't implement the fullscreen API for us to use.

@hardcodet care to submit that code into a React Native section for our react guide? Thanks!

gkatsev on 20 Dec 2017

Closing this but if anyone wants to add a piece to the react-native guide, that would be great.

gkatsev on 3 Jan 2018

Sorry for not getting back to you earlier. I'm super new to RN and I yet have to do some testing in order to check whether this is a feasible approach on a wider array of devices. If nobody can chime in in the mean time, I'll hopefully come revisit this topic in a few weeks.

hardcodet on 3 Jan 2018

Hey, that's alright. Don't feel forced to if you are unsure that this is good enough to be documented. But if you do have the time, that would be awesome!

gkatsev on 3 Jan 2018

Is there any update on this or other people using React Native and VideoJS?

donlaur on 4 Sep 2018

Video.js depends on the DOM and is not well-suited to use in a mobile application. It _should_ work in a WebView, but that's about it. There are no plans in the near-term to make Video.js work anywhere but the web.