video text overlay with fadeIn, fadeOut doesn't work on Sarari and IE

Question

I have a background-video (html5 video tag) overlayed by a "h 1" titel animated by jQuery. On Firefox and Chrome it works fine: video playback starts, and after every loop when the video restarts jQuery gets triggered by the video-event and restarts the titel-animation as well, so both video playback and video titel-text overlay are synchronized.

Unfortunately, on IE there is no titel-text displayed at all, and on Chrome the titel-text is displayed only on the first video-loop, as soon as the video starts the second loop there is no titel-text displayed anymore.

Here my code:

<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/SOLUTION:

I managed to fix it myself. Basically, there were 2 issues here.

First, the above code is using ES6 (EcmaScript 6) which is not supported by IE, see here: Support for ES6 in Internet Explorer 11

I had to remove the new syntax for callbacks, e.g.:

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

and instead rewrote it the old way:

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

Another big problem was, that some browsers, Safari and IE, didn't really fire some of the video events (e.g. event "play") when the video was set to loop. So, I deactivated the looping by removing the "loop" data attribute in the tag. Then, I added the following jQuery code which waits for the video event "ended" and then restarts the video again. Now the video loops, as before, but because it is programmatically restarted everytime, it fires the "play" event everytime the loop starts. I needed this "play" event so be able to restart the video text overlay animation. This way, the video and the animated text overlay stay synchronized.

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

From your above code example, I am not able to produce the issue like what you said in the description. I also have some confusion like are you using video tag for playing the video? You said animated title, Are you talking about subtitle of video? or it is a title text above your video. Please try to post a code example which can produce the issue. it can help us to understand the issue in better way. — Deepak-MSFT, Mar 26 '19 at 05:59
I can see that you had posted the solution by modifying the original post. I suggest you to post your solution as an answer and try to mark your own answer or other helpful suggestion as an accepted answer for this question when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. — Deepak-MSFT, Mar 28 '19 at 05:50

user3613129 · Answer 1 · 2019-03-27T03:17:18.857

There are several mistakes in your DOM element class names and the jQuery selectors used.

HTML Code:

<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>

Here you had provided an incorrect class name to the div element. In case you want to provide .(dot) in the class name, then you should escape the .(dot) character in your jQuery selector.

jQuery Code:

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

}

Here also there was a small mistake, you have put a p(paragraph) element inside your main div, however in your jQuery selector you were trying to select a span, which is not present inside the div element.

I have created a sample fiddle here https://jsfiddle.net/tgb1ucdj/. Please have a look at it and let me know if you face any further issues.

I appologize, I made many mistakes in my above code, you are right. It happened when I extracted the code I thought is necessary to show here on Stackoverflow and alteres a couple names and textes to make it anonymous. At the end I managed to fix it myself. I will edit my posting and upload the fix in a couple minutes. — user838531, Mar 27 '19 at 14:21

video text overlay with fadeIn, fadeOut doesn't work on Sarari and IE

1 Answers1