带有淡入淡出的视频文本覆盖在 Sarari 和 IE 上不起作用

Question

我有一个由 jQuery 动画制作的“h 1”标题覆盖的背景视频（html5 视频标签）。在 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");
            })

    }

更新/解决方案：

我设法自己修复了它。基本上，这里有两个问题。

首先，上面的代码使用的是 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 元素提供了不正确的类名。如果您想在类名中提供 .(dot)，那么您应该在 jQuery 选择器中转义 .(dot) 字符。

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");
    })

}

这里也有一个小错误，您在主 div 中放置了一个 p(paragraph) 元素，但是在您的 jQuery 选择器中，您试图选择一个 span，它不存在于div 元素。

我在这里创建了一个示例小提琴https://jsfiddle.net/tgb1ucdj/。请查看它，如果您遇到任何其他问题，请告诉我。