Вы можете ждать видео, чтобы быть в состоянии готовности, как:
var video = document.getElementById("videoId");
if (video.readyState === 4) {
// change the img tag z-index with a lower z-index than the video
}
Это Javascript говорит, что, когда видео полностью загружен он заменяет (на самом деле, он идет сверху) изображения, которое покрывал его. В HTML вы помещаете тег img с изображением предварительного просмотра, которое будет отображаться до тех пор, пока видео не будет загружено, и вы создадите конкретный CSS для элементов img и video. Поместите позицию в абсолютную или фиксированную или относительную и примените z-индекс 2 для img и 1 для видеоэлемента, делая изображение перекрывающимся поверх видеотега. В Javascript, когда видео полностью загружено, вы можете изменить CSS элементов img и video, обменяв их z-index с 2 на 1 и с 1 на 2 или установив свойство img display none, это вам по вкусу ,
Надеюсь, это помогло!
Посмотрите документацию на Mozilla https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
Спасибо за ваш ответ. –