ReactJS Video player (react-player) - Как проверить, было ли (полностью) воспроизведено видео?

Я использую ReactJS и пытаюсь отобразить видео, в котором пользователю разрешено продолжить только после просмотра всего видео. В настоящее время я использую зависимость под названием React-player, у нее есть возможность проверить, когда она закончилась, но тогда пользователь может просто пропустить видео.

Есть ли способ проверить, воспроизводилось ли видео определенное время? Или можно отключить переадресацию?

Это мой код в настоящее время:

    <ReactPlayer
        onEnded={() => setVideoEnded(true)}
        url={
            "https://...server.net/NodeUploadServer/public/" +
            course.video
        }
        width="100%"
        height="100%"
        controls={true}
    />

    <Button disabled={!videoEnded} >
      Go to test
    </Button>

reactjs javascript react-player
person SJ19    schedule 16.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот два возможных решения вашего вопроса:

Используйте настраиваемый пользовательский интерфейс игрока

Первое решение - удалить элементы управления проигрывателем по умолчанию, которые визуализируют компонент временной шкалы. Однако с этим решением вам нужно будет создать собственный пользовательский интерфейс.

Следите за сыгранным временем

У встроенного в реакцию игрока есть событие для публикации прошедшего времени, но это не то, что вы ищете.

Если вы используете видеопроигрыватель HTML5, вы можете использовать воспроизведено и проверьте, воспроизводилось ли видео в определенном диапазоне.

В противном случае вам нужно будет отслеживать время, которое игралось, используя интервал или событие timeupdate.

person Chris    schedule 16.10.2020
comment
Спасибо! Я решил это, используя третье решение, которое отключало элементы управления и создавало свои собственные элементы управления для воспроизведения и приостановки :) - person SJ19; 17.10.2020
comment
@ sj19 - есть ли у вас codeanbox или jsfiddle примера react-player с небольшими настраиваемыми элементами управления? Я не могу поверить, что в документации нет примера, что немного усложняет работу, если вы исходите из react-hooks (react-player не использует хуки) - person cacoder; 01.02.2021