Перетаскивание временной шкалы видео и щелчок

Я новичок в GSAP, и я пытаюсь включить перетаскивание и щелкнуть по настраиваемой временной шкале видео html5 с помощью GSAP. Я прочитал пару сообщений на форуме GSAP, но кое-что я, очевидно, не могу понять ...

Я воспроизвел упрощенный пример на следующем jsfiddle: https://jsfiddle.net/epigeyre/oLmk6b0d/2/

Итак, я создаю перетаскиваемый элемент из элемента, хранящегося в переменной, привязываю его к контейнеру (который является контейнером временной шкалы), а затем добавляю свою функцию onDrag (думаю, щелчок будет таким же). Ход временной шкалы отображается с помощью div внутри контейнера временной шкалы, который масштабируется по оси X от 0 до 1. Я думаю, что привязка к текущему времени видео в порядке, но анимация - нет (я не понимаю, почему применяется перевод ...).

Вот этот конкретный фрагмент:

Draggable.create( timelineProgress, {
  type:'x',
  bounds: timeline, // My timeline container
  onDrag: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ;
  },
  onClick: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenLite.set( timelineProgress, { scaleX: this.x / this.maxX } ) ;
  }
});

Не могли бы вы помочь мне понять, что происходит? Спасибо большое за вашу помощь!


javascript html gsap draggable
person Pipo    schedule 15.06.2017    source источник
comment
Не совсем понятно, чего вы пытаетесь достичь. Перетаскивание действительно работает, если вы удалите различные строки, которые вызывают изменение scaleX TimelineProgress. Чего вы пытаетесь достичь с помощью scaleX? Я думаю, что есть свойство обновления draggable, которое может помочь, если необходимо оставить scaleX.   -  person Paul Thomas    schedule 19.06.2017
comment
Спасибо за ответ, я нашел решение, использующее свойство trigger. Я отправлю сюда свой код, когда у меня будет немного времени!   -  person Pipo    schedule 20.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, вот решение для тех, кому нужно создать собственный видеоплеер. Используя GSAP, у вас есть действительно интересное свойство trigger в подключаемом модуле Draggable.

Вот как я заставил это работать для временной шкалы HTML5.

var video = document.getElementsByTagName('video')[0],
    play = document.getElementsByClassName('video__play')[0],
    timeline = document.getElementsByClassName('timeline')[0],
    timelineProgress = document.getElementsByClassName('timeline__progress')[0],
    drag = document.getElementsByClassName('timeline__drag')[0];

// Toggle Play / Pause
play.addEventListener('click', togglePlay, false);

function togglePlay() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

// on interaction with video controls
video.onplay = function() {
  TweenMax.ticker.addEventListener('tick', vidUpdate);
};
video.onpause = function() {
	TweenMax.ticker.removeEventListener('tick', vidUpdate);
};
video.onended = function() {
	TweenMax.ticker.removeEventListener('tick', vidUpdate);
};

// Sync the timeline with the video duration
function vidUpdate() {
  TweenMax.set(timelineProgress, {
    scaleX: (video.currentTime / video.duration).toFixed(5)
  });
  TweenMax.set(drag, {
    x: (video.currentTime / video.duration * timeline.offsetWidth).toFixed(4)
  });
}

// Make the timeline draggable
Draggable.create(drag, {
  type: 'x',
  trigger: timeline,
  bounds: timeline,
  onPress: function(e) {
    video.currentTime = this.x / this.maxX * video.duration;
    TweenMax.set(this.target, {
      x: this.pointerX - timeline.getBoundingClientRect().left
    });
    this.update();
    var progress = this.x / timeline.offsetWidth;
    TweenMax.set(timelineProgress, {
      scaleX: progress
    });
  },
  onDrag: function() {
    video.currentTime = this.x / this.maxX * video.duration;
    var progress = this.x / timeline.offsetWidth;
    TweenMax.set(timelineProgress, {
      scaleX: progress
    });
  },
  onRelease: function(e) {
    e.preventDefault();
  }
});
video {
  display: block;
  width: 100%;
  height: auto;
}

.timeline {
  width: 100%;
  height: 10px;
  background-color: black;
  cursor: pointer;
  position: relative;
}

/* Here is the dragger that I will use to move the video 
* current time forward or backward.
* I have added a background color for you to see it
* but just remove it in production.
*/

.timeline__drag {
  width: 1px;
  height: 20px;
  top: -10px;
  background-color: yellow;
  position: absolute;
  z-index: 2;
  transform-origin: 0 0;
}

.timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
  transform: scaleX(0);
  transform-origin: 0 0;
  position: relative;
  z-index: 1;
}

button {
  margin-top: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/TweenMax.min.js"></script>

<video>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<div class="timeline">
  <div class="timeline__drag"></div>
  <span class="timeline__progress"></span>
</div>
<button class="video__play">Play / Pause video</button>

Я должен поблагодарить Карла из форума GSAP за его чудесную помощь!

person Pipo    schedule 29.06.2017