Загрузить 2 видео одновременно

168
25 июля 2021, 16:10

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 видео, чтобы не было "раздумий"?

Answer 1

Можно попробовать как и в случае с картинкой: создаем через 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>

READ ALSO
Как увеличить изображение по пиксельно в react-native?

Как увеличить изображение по пиксельно в react-native?

есть картинка png формата маленькая 30 на 30 пикселей надо увеличить картинку по пиксельно до 300 на 300 без потери качества может большекак это...

186
Поделитесь хорошими гайдами по созданию сайтов на Node [закрыт]

Поделитесь хорошими гайдами по созданию сайтов на Node [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах

176
Как сохранить переменную из функции?

Как сохранить переменную из функции?

Нужно сохранить переменные var AI_temp_A3_new_OUTGraph и var airflowM2Graph вне функции

237
Не работает переключатель городов

Не работает переключатель городов

Не работает переключатель городов на лендингеПодскажите пожалуйста что исправить в коде

203