наложение видео с помощью fadeIn, fadeOut не работает на Sarari и IE - PullRequest
Новая
       15

наложение видео с помощью fadeIn, fadeOut не работает на Sarari и IE

0 голосов
/ 25 марта 2019

У меня есть фоновое видео (тег видео html5), наложенное титром «h 1», анимированным jQuery.В 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 проблемы.

Во-первых, в приведенном выше коде используется ES6 (EcmaScript 6), который не поддерживается IE, см. Здесь: Поддержка ES6 в Internet Explorer 11

Мне пришлось удалить новый синтаксис для обратных вызовов, например: 

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

, и вместо этого переписать его по-старому: 

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

Другая большая проблема заключалась в том, что некоторыебраузеры, Safari и IE, на самом деле не запускали некоторые из видео событий (например, событие «воспроизведение»), когда видео было установлено на петлю.Итак, я отключил зацикливание, удалив атрибут данных «loop» в теге.Затем я добавил следующий код jQuery, который ждет, когда видео-событие «закончится», а затем перезапускает видео снова.Теперь видео зацикливается, как и раньше, но поскольку оно программно перезапускается каждый раз, оно запускает событие «воспроизведения» при каждом запуске цикла.Мне нужно было это событие воспроизведения, чтобы можно было перезапустить анимацию наложения видео-текста.Таким образом, видео и наложение анимированного текста остаются синхронизированными. 

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

1 Ответ

1 голос
/ 26 марта 2019

В именах классов элементов 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/. Пожалуйста, посмотрите на него и дайте мне знать, если у вас возникнут какие-либо проблемы.

...