как показать предварительный просмотр видео перед его загрузкой в ​​javascript?

Question

код работает хорошо для предварительного просмотра изображения, но в случае предварительного просмотра видео он не работаетатрибут видеоЕсть идеи, почему это не работает?я использую браузер Firefox

class Video extends React.Component {
        constructor() {
            super();
            this.onChange = this.onChange.bind(this);
        }

        onChange(event) {
            let output = document.getElementById('video');
            output.src = URL.createObjectURL(event.target.files[0]);


        };
        render() {
            return (
                <div>
                    <input type="file" onChange={this.onChange}/>
                     <video width="320" height="240" controls>
                      <source id="video" src=''/>
                    </video>
                    <img src="" id="video"/>
                </div>
            )

        }
    }




output for video :
<source id="video" src="blob:http://127.0.0.1:3000/25fdfed9-24fc-4d31-aecb-6e677f3abd3f">