1

Есть 4 видео, что написать в функцию js чтобы переключиться на следующее видео с 1-го на 2-ое, со 3-его на 4-ое и ,с 4-ого на 1-ое видео?

var videos = {
  'videos_list_0': [
    "videos/01.ObstacleCourse_Eng_Master.mp4",
    "videos/03.Work_Eng_Master.mp4",
    "videos/06.GoingOut_Eng_Master.mp4",
    "videos/09.Selfie_Eng_Master.mp4"
  ]
};
(function() {
  var video = document.querySelectorAll('video[data-videolist]');

  for (var i = 0; i < video.length; i++) {
    var n = video[i].hasAttribute('data-video') ? Number(video[i].getAttribute('data-video')) : 0,
      r = video[i].getAttribute('data-reiteration') == 'true' ? true : false,
      ap = video[i].getAttribute('data-autoplay') == 'true' ? true : false,
      vl = video[i].hasAttribute('data-videolist') ? video[i].getAttribute('data-videolist') : null;
    if (videos[vl]) {
      video[i].src = videos[vl][n];
      if (ap) {
        video[i].play();
      };
      video[i].video = n;
      video[i].onended = function() {
        if (this.video == videos[vl].length - 1) {
          if (r) {
            this.video = 0;
            this.src = videos[vl][0];
            this.play();
          };
        } else {
          this.video = this.video + 1;
          this.src = videos[vl][this.video];
          this.play();
        };
      };
    } else {
      console.error('Undefined video list!');
    };
  };
}());
<div class="tab-pane" id="tabs1">
  <div id="slider">
    <input type="radio" name="slider" id="slide1" checked="">
    <input type="radio" name="slider" id="slide2">
    <input type="radio" name="slider" id="slide3">
    <input type="radio" name="slider" id="slide4">

    <div id="slides">
      <div id="overflow">
        <div class="inner">
          <div class="page">
            <video data-videolist="videos_list_0" data-video="0" data-reiteration="true" data-autoplay="true" controls=""></video>
          </div>
        </div>
      </div>
    </div>

    <div id="active">
      <label for="slide1" class="thumb-1">
                        
                    </label>
      <label for="slide2" class="thumb-2">
                        
                    </label>
      <label for="slide3" class="thumb-3">
                        
                    </label>
      <label for="slide4" class="thumb-4">
                        
                    </label>
    </div>

  </div>
  <!--slider-->
</div>

4
  • 1
    Возможный дубликат вопроса: Как последовательно вызвать асинхронную функцию с коллбеками?
    – Qwertiy
    24 окт 2017 в 10:18
  • Ну я в первом комментарии и написал такую идею навскидку. Делаем массив источников [ "видео1.мп4", "видео2.мп4" ], дальше находим элемент video устанавливаем первый источник видео и регистрируем событие окончания, в обработчике события меняем источник на второй из массива и т.д. 24 окт 2017 в 10:31
  • @Anton, нет, не другое. Асинхронная функция (как dosmth) запускает воспроизведение видео и вызывает коллбек в событие завершения проигрывания. В этот момент надо перейти к следующему элементу массива (функция go). Чтобы зациклить надо в if (i >= data.length) { вместо return сделать i=0. ru.stackoverflow.com/a/708782/178988 - вот этот ответ. Но и ответ с промисом тоже подходит.
    – Qwertiy
    24 окт 2017 в 11:33
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    25 окт 2017 в 15:44

1 ответ 1

1

var video = document.querySelector( '#video' );

var sources = [
  'videos/1.mp4',
  'videos/2.mp4',
  'videos/3.mp4'
]


var i = 0;

video.src = sources[i];

video.addEventListener( 'ended', function( e ) {
  if ( ++i == sources.length  ) i = 0;
  video.src = sources[i];
} );
<video src="" id="video" autoplay controls></video>

let video = document.querySelector( '#video' );

let sources = [
  'videos/1.mp4',
  'videos/2.mp4',
  'videos/3.mp4'
]

function videoEnded() {
  return new Promise( ( resolve, reject ) => {
    video.addEventListener( 'ended', ( e ) => {
      resolve();
    } )
  } )
}

async function play () {
  for( let i = 0; ; i++ ) {
    if ( i == sources.length ) i = 0;

    video.src = sources[i];
    await videoEnded();
  }
}

play();
<video src="" id="video" controls autoplay></video>

11
  • let video ? это какой язык ?
    – Anton
    24 окт 2017 в 12:36
  • @Anton, javascript ES6. async/await - ES2017. kangax.github.io/compat-table/es2016plus
    – Qwertiy
    24 окт 2017 в 12:45
  • @Qwertiy а как это на обычном сделать ?
    – Anton
    24 окт 2017 в 12:47
  • @Anton, ну прочитай уже решение с рекурсивным go внимательно. Всё же подробно расписано. И этот комментарий.
    – Qwertiy
    24 окт 2017 в 14:17
  • А что тут необычного? Современный JS. 24 окт 2017 в 15:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.