Изменение источника видео html5 с предварительной загрузкой

Question

Я создаю сайт портфолио видео, чтобы продемонстрировать различные концепции для разработчиков программного обеспечения, и часто есть несколько версий одного и того же видео.

Я написал следующий javascript, чтобы сменить видео, и он отлично работает на месте, проблема в том, что после того, как его размещаемые видео изменяют видео плеер. Я предполагаю, что причина в том, что новое видео не загружено. Есть идеи?

function switcher(wrapper, e, source, container, video){ 

//get current version and turn off its style 
var off = document.getElementById(wrapper).getElementsByClassName("versionActive")[0]; 
off.className = "version"; 

//turn on the new button 
e.className = "versionActive"; 

var videoSource = document.getElementById(source); 
var videoContainer = document.getElementById(container); 

lastPlayingVideo.currentTime = 0; 
lastPlayingVideo.pause(); 
lastPlayingVideo = videoContainer; 

videoSource.setAttribute('src', video); 
videoContainer.load(); 
videoContainer.play(); 

} 

HTML, для видеоплеера выглядит следующим образом:

<video id="container1" controls="" loop="" preload="auto" width="1280" height="720"> 
    <source id="video1" src="videos/Reminder.mp4" type="video/mp4"> 
</video> 

Answer 1

Try:

videoContainer.addEventListener('canplay', function() { 
    videoContainer.play(); 
    videoContainer.removeEventListener('canplay'); 
}); 
videoSource.setAttribute('src', video); 
videoContainer.load(); 

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