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

    }

更新/解决方案：

我设法自己修复了它。基本上，这里有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（paragraph）元素，但是在jQuery选择器中，您试图选择一个span， div元素中不存在。

我在https://jsfiddle.net/tgb1ucdj/处创建了一个样本提琴。请查看一下，如果还有其他问题，请通知我。

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

1 个答案: