VIDEOJS: ERROR: TypeError: Cannot set property 'textContent' of null

Description

This issue didn’t happen when I was using video.js@7.6.6. After I upgraded video.js to version 7.7.5, which is the newest version, the error in the title occurred. It doesn’t affect the main functionality of the recorder component but affects the time display in the control bar.

Error output

VIDEOJS: ERROR: TypeError: Cannot set property 'textContent' of null at Record.setDuration (videojs.record.js:924) at Record.setupUI (videojs.record.js:289) at HTMLDivElement.func (video.es.js:2120) at HTMLDivElement.data.dispatcher (video.es.js:1934) at trigger (video.es.js:2070) at Player.trigger$1 [as trigger] (video.es.js:2955) at Player.eval (video.es.js:3968) at eval (video.es.js:4622)

Steps to reproduce

I’m running Windows 10 and testing with Chrome version 80.0.3987.132 (64-bit). I’m not putting a source tag inside the video tag because it is not needed for recording purpose. Follow the code and versions below to reproduce the error.

Versions

• react: 16.13.1
• video.js: 7.7.5
• videojs-record: 3.11.0
• webrtc-adapter: 7.5.1

Code

Some of the import and unrelated code is omitted here for conciseness.

import 'videojs-record/dist/css/videojs.record.min.css';

import React, { Component } from 'react';

import videojs from 'video.js';
import 'webrtc-adapter';
import RecordRTC from 'recordrtc';
import Record from 'videojs-record/dist/videojs.record.js';

class Recorder extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.player = videojs('recorder', {
            controls: false,
            preload: 'none',
            fill: true,
            aspectRatio: '16:9',
            plugins: {
                record: {
                    audio: true,
                    video: true,
                    maxLength: 1800, // allow maximum of 30-minute recording
                    videoMimeType: 'video/webm;codecs=H264'
                }
            },
            controlBar: {
                deviceButton: false,
                fullscreenToggle: false,
                recordToggle: false
            }
        });
    }

    componentWillUnmount() {
        this.player.record().destroy();
    }

    render() {
        return (
            <div>
                <video id='recorder'
                    className='video-js vjs-theme-fantasy'/>
            </div>
        );
    }

Additional information

The source file I’m using for videojs.record.js is under the dist folder so please refer to that built file by webpack for the line number.

My investigation of the issue is that the setup of the time display UI occurs before the UI is rendered properly. Not sure if it’s directly due to video.js@7.7.5.

[thijstriemstra]

@rexcheng1997 means 4.0.0, 3.12.0 doesn’t exist. And yea stick to videojs 7.7.6 until i get a chance to test 7.8.1. I know the changelog says “videojs 7.7.6 or newer” but it basically means “7.7.6 works for sure, newer versions likely work as well”.

[abhinavsingh]

@rexcheng1997 where can I find 3.12.0? Per changelog it jumped from 3.11.0 to 4.0.0. Am I missing something?