使用fadeIn覆盖视频文本，fadeOut在Safari和IE上无效

Question

我有一个背景视频（html5视频标签），由jQuery动画的“h 1”标题覆盖。在Firefox和Chrome上它运行正常：视频播放开始，每次循环后视频重新启动jQuery都会被视频事件触发并重新启动标题动画，因此视频播放和视频标题文本叠加都会同步。

不幸的是，在IE上根本没有显示标题文本，而在Chrome上，标题文本仅在第一个视频循环中显示，一旦视频开始第二个循环，就不再显示标题文本。

这是我的代码：

<div class="header-image-wrapper.wrap">
<h1 class="shadow" style="display: block; color: rgb(255, 255, 255);"></h1>
<p class="shadow" style="margin-top: 70px;"></p>
</div>


document.getElementById('bgvid').addEventListener('playing', myVideoHandler, false);

    function myVideoHandler(e) {

        const $this = $('div.header-image-wrapper.wrao h1');
        const $span = $('div.header-image-wrapper.wrap h1 span');
        $this.delay(700)
            .fadeOut(0, () => {
                $this.html('Text000000000000000000');
                $this.css("color", "#fff");
            })
            .fadeIn(500)
            .delay(8500)
            /*.fadeOut(0)
            .fadeIn(500, () => {
                $this.html('Text1111111<br>Text1111111111');
            })
            .delay(5000) */
            .fadeOut(500, () => {
                $this.html('Text222222222');
                $this.css("color", "#fff");
            })
            .fadeIn(500)
            .fadeOut(300, () => {
                $this.html('');
                $this.css("color", "#fff");
            })

    }

UPDATE /解决方案：

我自己设法解决了这个问题。基本上，这里有2个问题。

首先，上面的代码使用的是IE不支持的ES6（EcmaScript 6），请看这里：Support for ES6 in Internet Explorer 11

我不得不删除回调的新语法，例如：

.fadeIn(500, () => {
                    $this.html('Text1111111<br>Text1111111111');
                })

而是用旧的方式改写它：

.fadeIn(500, function() {
                    $this.html('Text1111111<br>Text1111111111');
                })

另一个大问题是，当视频设置为循环时，某些浏览器，Safari和IE，并没有真正触发某些视频事件（例如事件“播放”）。因此，我通过删除标记中的“循环”数据属性来停用循环。然后，我添加了以下jQuery代码，等待视频事件“结束”，然后再次重新启动视频。现在，视频像以前一样循环，但因为它每次都以编程方式重新启动，所以每次循环开始时它都会触发“播放”事件。我需要这个“播放”事件，因此能够重新启动视频文本叠加动画。这样，视频和动画文本叠加保持同步。

$("#bgvid").bind("play", function() {
        myVideoHandler();
    });
    $("#bgvid").bind("ended", function() {
        $("#bgvid").get(0).play();
    });

Answer 1

您的DOM元素类名称和使用的jQuery选择器有几个错误。

HTML代码：

<div class="header-image-wrapper wrap">
  <h1 class="shadow" style="display: block; color: rgb(255, 255, 255);"></h1>
  <p class="shadow" style="margin-top: 70px;"></p>
</div>

在这里，您为div元素提供了一个不正确的类名。如果你想在类名中提供.（点），那么你应该在jQuery选择器中转义.（点）字符。

jQuery代码：

document.getElementById('bgvid').addEventListener('playing', myVideoHandler, false);

function myVideoHandler(e) {

  const $this = $('div.header-image-wrapper.wrap h1');
  const $span = $('div.header-image-wrapper.wrap h1 p');
  $this.delay(700)
    .fadeOut(0, () => {
      $this.html('Text000000000000000000');
      $this.css("color", "#fff");
    })
    .fadeIn(500)
    .delay(8500)
    /*.fadeOut(0)
    .fadeIn(500, () => {
        $this.html('Text1111111<br>Text1111111111');
    })
    .delay(5000) */
    .fadeOut(500, () => {
      $this.html('Text222222222');
      $this.css("color", "#fff");
    })
    .fadeIn(500)
    .fadeOut(300, () => {
      $this.html('');
      $this.css("color", "#fff");
    })

}

这里也有一个小错误，你在你的主p中放了一个div（段落）元素，但是在你的jQuery选择器中你试图选择一个span元素中没有的div。

我在这里创建了一个样本小提琴https://jsfiddle.net/tgb1ucdj/。如果您有任何进一步的问题，请查看它并告诉我。