Блог

Главная - Вопросы по программированию - Управление атрибутом poster в теге video HTML5

Управление атрибутом poster в теге video HTML5

#javascript #reactjs #video #video-streaming #html5-video

#javascript #reactjs #Видео #потоковое видео #html5-видео

Вопрос:

Можно ли контролировать, как долго изображение плаката отображается в теге видео HTML5? Обычно изображение отображается до тех пор, пока видео не будет автоматически воспроизведено или пользователь не нажмет кнопку воспроизведения, но по какой-то причине изображение остается поверх видео в течение 1 или 2 дополнительных секунд при его автоматическом воспроизведении.

 <div id="player-container" style={{ display: parentalDisplay }}>
     <video autoPlay ref={playerRef} style={{ width: '100vw', height: '100vh' }} poster={posterURL} />
</div>

На ПК этого не происходит, но поскольку мы работаем с приложением Smart TV, аппаратное обеспечение обычно работает медленнее, и переход от изображения плаката к видео не выглядит плавным.
Возможно, я могу установить таймер с помощью JS, скрыв изображение до его начала воспроизведения? но я не знаю, как им управлять, поскольку HTML выполняет эту работу под капотом.

Комментарии:

1. почему вы не воспроизводите видео через 5 секунд после монтирования компонентов?

2. Вы пробовали файл плаката меньшего размера? Или даже полностью удалить плакат, если он автоматически воспроизводится?

3. @AaminKhan я попробую это. Монтирование компонентов — это когда проигрыватель готов? Если нет, то сложно установить таймер, потому что иногда для загрузки требуется 8 секунд, а иногда 22. Это зависит от подключения к Интернету и от того, насколько «старым» является ваш телевизор. Итак, мне нужно что-то более общее, но попробовать стоит.

4. @DougSillars изображения поступают из серверной части, и, поскольку это довольно большое приложение (200 тыс. пользователей), мы ничего не можем изменить. Poster удаляется, но по какой-то причине занимает 1/2 секунды, чтобы исчезнуть после автозапуска.

Ответ №1:

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

 const [posterStyle, setPosterStyle] = useState({});

    useEffect(() => {
        if (state.currentChannel.images) setPosterStyle({ background: `transparent url('${state.currentChannel.images.ch_logo.large}') 50% 50% / 800px no-repeat  ` });
    }, [state.currentChannel.images]);

..............

<video autoPlay ref={playerRef} style={{ ...posterStyle, width: '100vw', height: '100vh' }} />