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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)相关的知识,希望对你有一定的参考价值。

{% 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 %}
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();

以上是关于javascript iOS设备上的全屏背景视频幻灯片 - 注意目前使用jquery :)的主要内容,如果未能解决你的问题,请参考以下文章

带封面图片的全屏背景 HTML5 视频

当设备仅从纵向旋转到横向时,网页上的全屏图像被挤压

不使用 Flash 的全屏视频背景

无 JS 的全屏 HTML5 视频背景

使用 HTML5 的全屏背景视频

想要为全屏视频背景上的音频创建自定义静音/取消静音按钮