Переключить источник видео - одновременно на слайдере - JS, HTML5 Video

У меня есть функция JS, которая изменяет источник видео HTML-видео. Кнопка активирует эту функцию. Он загружает одно и то же новое видео на коммутаторе. Есть 2 видео одинаковой длины.

Как мне:

  1. меняйте видео каждый раз, когда я нажимаю кнопку?

  2. когда я нажимаю кнопку, может ли загрузка видео одновременно воспроизводить предыдущее видео?

HTML:

<button onclick="myFunction()" type="button">Change Video</button>

<video id="myVideo" controls autoplay>
 
 

 </video>

JS

var vid = document.getElementById("myVideo");

function myFunction() { 

 vid.src = "video2.mp4";

vid.load();
}
1 ответ

Вот скрипка, которая решает обе ваши проблемы, http://jsfiddle.net/egjyd9rs/5/

В принципе, функция переключения, которая заботится обо всех, как показано ниже,

function myFunction() {
 currentlPlayingTime = vid.currentTime;
 if (currentlyPlaying === 1) {
 vid.src = src2;
 currentlyPlaying = 2;
 statusElement.innerText = 'Going to play video2..';
 } else {
 vid.src = src1;
 currentlyPlaying = 1;
 statusElement.innerText = 'Going to play video1..';
 }
 vid.load();
 vid.addEventListener('loadedmetadata', function () {
 vid.currentTime = currentlPlayingTime;
 }, false);
}

licensed under cc by-sa 3.0 with attribution.