let myvid = document.getElementById('my-player');
let myvids = [
"1.MOV",
"2.MOV",
];
let activeVideo = 0;
myvid.addEventListener('ended', function(e) {
activeVideo = activeVideo++;
myvid.src = myvids[1];
const playPromise = myvid.play();
if (playPromise !== null) {
playPromise.catch(() => {
myvid.play();
})
}
});
<video id="my-player2" class="video-js" controls preload="auto" poster="second.mp4" data-setup='{}'>
<source src="2.MOV" type=" video/mp4"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
Есть 2 видео, которые я загружаю одно за другим. После того как 1 заканчивается, браузер в течение некоторого малого времени подгружает 2 видео и воспроизводит его. Как заранее подгрузить 2 видео, чтобы не было "раздумий"?
Можно попробовать как и в случае с картинкой: создаем через JS tag VIDEO, устанавливаем source с нужной ссылкой, video подгружается, а потом в нужный момент просто меняем source уже на подгруженное видео:
const item = document.querySelector('#item');
const button = document.querySelector('button');
const video = document.querySelector('#video');
const nextVideo = document.createElement("VIDEO");
nextVideo.setAttribute("src","https://www.w3schools.com/jsref/movie.mp4");
button.addEventListener('click', () => {
video.setAttribute("src","https://www.w3schools.com/jsref/movie.mp4");
})
<div id="item">
<video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</div>
<button>Click for next video</button>
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости