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,

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

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>
        );
    }
}