html iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)

Posted 2021-05-10

window.__next_video = 0;

function playNextVideo() {
  if (window.__next_video === $('video').length) {
    window.__next_video = 0;
  }
  playVideoAtIndex(window.__next_video);
  window.__next_video++;
}

function playVideoAtIndex(index) {
  $('video').each(function(i, video) {
    var $vid = $(video);
    var vid = $vid[0];
    $vid.off('ended');
    $vid.fadeOut('fast');
    if (index === i) {
      vid.load();
      vid.play();
      $vid.fadeIn('fast');
      $vid.on('ended', playNextVideo);
    }
  });
}

playNextVideo();

{% for video in site.static_files %}
  {% if video.path contains 'img/videos' %}
    <video muted playsinline>
      <source src="{{ site.baseurl }}{{ video.path }}" type="video/mp4">
    </video>
  {% endif %}
{% endfor %}