【问题标题】：Use Javascript to cycle through video backgrounds and change CSS使用 Javascript 循环播放视频背景并更改 CSS
【发布时间】：2017-05-29 08:57:52
【问题描述】：

我想使用一个 div (#button) 来循环四种不同的状态，并在点击时更改特定的 CSS 属性；使用 Javascript 或 jQuery 是有意义的。

默认状态是白色背景，具有下面列出的特定 CSS 属性。接下来的 3 个状态使用 HTML5 视频作为背景，并且 CSS 属性都需要切换到#fff。所以页面默认启动，当按钮 div 被点击时，它将是：vid1，vid2，vid3，返回默认，vid1，vid2，vid3，默认...等。默认的 CSS 设置为 #000，视频的 CSS 设置为 #fff。

视频背景的 HTML； mp4 和 webm 版本的源链接都需要更新为 vid2、vid3 等。

<video playsinline autoplay muted loop id="bgvid">
    <source src="videos/vid1.webm" type="video/webm">
    <source src="videos/vid1.mp4" type="video/mp4">
</video>

以下 CSS 属性是我想要更改的，当处于具有视频背景的 3 种状态时。

h1 {color: #000;}
p {color: #000;}
h1 a {color: #000;}
#button:active {background-color: #000;}
#nav-icon span {background: #000;}

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

我会先创建一些不错的数组，其中包含 CSS 类和每个步骤的视频源列表。

接下来，我将根据 Array 中的数据，根据需要创建 video 标签。您可以在开始时为每个步骤创建视频标签，为每个步骤显示和隐藏适当的标签。

您也可以在点击按钮后创建一个video标签并删除之前的标签。

对于每个步骤，您都可以拥有一个 CSS 类，您可以在单击按钮后将其应用于某些父元素（例如 body）。这样你就可以巧妙地将样式与实际的 JavaScript 分开。

概念证明

$(function(){
  var steps = [
    {
      cssClass: 'default'
    },
    {
      cssClass: 'video',
      sources: [
        ['videos/vid1.webm', 'video/webm'],
        ['videos/vid1.mp4', 'video/mp4']
      ]
    },
    {
      cssClass: 'step3',
      sources: [
        ['videos/vid2.webm', 'video/webm'],
        ['videos/vid2.mp4', 'video/mp4']
      ]
    }
  ];
  
  $('button').click(function(){
    if (steps.length == 0) {
      return;
    }
    
    var prevStepIndex = parseInt($(this).data('step') || 0);
    var currentStepIndex = prevStepIndex + 1;
    if (currentStepIndex >= steps.length) {
      currentStepIndex = 0;
    }
    var currentStep = steps[currentStepIndex];
    
    $('body').attr('class', currentStep.cssClass || '');
    
    $(this).data({'step': currentStepIndex});
    $('#step').text(currentStepIndex);
  });
});

.default h1,
.default h1 a,
.default p {
  color: #000;
}

.default #button:active,
.default #nav-icon span {
  background: #000;
}

.video h1,
.video h1 a,
.video p {
  color: #fff;
}

.video #button:active,
.video #nav-icon span {
  background: #fff;
}

.step3 h1,
.step3 h1 a,
.step3 p {
  color: red;
}

.step3 #button:active,
.step3 #nav-icon span {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Test header</h1>
<button>Change!</button>
Current step: <span id="step"/>

【讨论】：