CODEWITHSUNDEEP
javascripthtmlcssreactjsvideo.js
Hamo
Hamo

Reputation: 99

"Video Player is Loading" "This is a modal window" - How to remove unwanted text in react videojs .m3u8 stream

I am embedding an .m3u8 stream in a react JS page. I am using video.js and have some unwanted text showing which I just cannot remove! The text is on two lines and says "Video Player is loading" then "This is a modal window". See the image below for an example (the blue box contains the video).

Once the video has loaded, the text does not go away and I can't work out why it is there in the first place. If anyone has any idea how to remove this text it would be fantastic. Thank you.

Please find my code below. It has been pretty much copy and pasted from the documentation: https://docs.videojs.com/tutorial-react.html

Image of the video space (blue box) with unwanted text showing below

import React, { Component } from 'react';
import { connect } from 'react-redux'
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
//import 'videojs-contrib-hls/dist/videojs-contrib-hls.js';
// Workaround for webworkify not working with webpack
window.videojs = videojs;
require('videojs-contrib-hls/dist/videojs-contrib-hls.js');

class VideoPlayer extends Component {
    componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            console.log('onPlayerReady', this)
        });
    }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }

    // wrap the player in a div with a `data-vjs-player` attribute
    // so videojs won't create additional wrapper in the DOM
    // see https://github.com/videojs/video.js/pull/3856
    render() {
        return (
          <div> 
            <div data-vjs-player>
              <video ref={ node => this.videoNode = node } className="video-js"></video>
            </div>
          </div>
        )
      }
    }

class videoWidget extends Component {

    render() {

        const videoOptions = {
            autoplay: true,
            textTrackSettings: false,
            bigPlayButton: false,
            controlBar: false,
            sources: [{
                src: 'http://my-source-url.m3u8',
                type: "application/x-mpegURL"
            }],
        }

        return (
            <div>
                <VideoPlayer {...videoOptions} />
            </div>
        );
    }
}

Upvotes: 1

Views: 3531

Answers (1)

Hamo
Hamo

Reputation: 99

I have just discovered that the two lines of text "Video player is loading" and "This is a modal window" can respectively be removed by adding the lines below into the videoOptions definition:

loadingSpinner: false,
errorDisplay: false,

Upvotes: 2

Related Questions