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

问题描述

我在反应 JS 页面中嵌入了一个 .m3u8 流。我正在使用 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>
        );
    }
}

标签： javascripthtmlcssreactjsvideo.js

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

问题描述

解决方案

推荐阅读