时间戳

首页 > 解决方案 > 带有淡入淡出的视频文本覆盖在 Sarari 和 IE 上不起作用

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

问题描述

我有一个由 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)，请参见此处：在 Internet Explorer 11 中对 ES6 的支持

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

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

标签： jqueryinternet-explorersafarihtml5-video

解决方案

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

}

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

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

推荐阅读