Реагировать на воспроизведение после завершения загрузки - PullRequest
Новая
       10

Реагировать на воспроизведение после завершения загрузки

0 голосов
/ 02 февраля 2020

Я пытаюсь написать собственный видеоплеер для демонстрационного автопроигрывания, но постоянно получаю DOMExceptions. Я бы подумал, что ссылка будет установлена ​​после того, как медиа был загружен / useEffect был запущен, но он, кажется, не определен.

Мои кнопки и флажок ввода работают отлично, это просто автозапуск, что я не могу добраться до Работа. И пока не предложен атрибут autoplay, я не могу заставить этот атрибут работать ни в одном из моих браузеров. По этой причине я пытаюсь запустить видео после его загрузки. 

import React = require('react');

    export const VideoPlayer = () => {
        let vidRef = React.useRef<HTMLVideoElement>(undefined);
        const [doesLoop, setDoesLoop] = React.useState(false);

        React.useEffect(() => {
            vidRef.current.play();
        }, [])

        return (
            <div>
                <h1>Nothing to see here...</h1>
                <video ref={vidRef} src="./media/scream.mp4" preload="auto" 
                    loop={doesLoop} onLoadedData={_ => vidRef.current.play()}/>
                <button onClick={e => vidRef.current.play()}>Play</button>
                <button onClick={e => vidRef.current.pause()}>Pause</button>
                <input type="checkbox" onChange={e => setDoesLoop(!doesLoop)} name="loop" />
                <label htmlFor="loop">Loop?</label>

            </div>
        );
    }
...