“视频播放器正在加载”“这是一个模态窗口”-如何在react videojs .m3u8流中删除不需要的文本

问题描述

我正在将.m3u8流嵌入到react JS页面中。我正在使用video.js，并显示了一些我无法删除的不需要的文本！文本在两行上显示“正在加载视频播放器”，然后显示“这是模式窗口”。参见下面的图像作为示例（蓝色框包含视频）。

视频加载后，文本不会消失，而且我也无法弄清为什么它首先出现在其中。 如果有人对如何删除此文本有任何想法，那就太好了。谢谢。

请在下面找到我的代码。它已从文档中复制并粘贴：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>
        );
    }
}

解决方法

我刚刚发现可以通过将以下两行添加到videoOptions定义中来分别删除文本两行“视频播放器正在加载”和“这是一个模态窗口”：

loadingSpinner: false,errorDisplay: false,