CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorervideo
Kai Qing
Kai Qing

Reputation: 18833

IE and html5 videos just stop working

I am using jQuery to hide and show a complex page. Within that page are numerous video tags. Eventually in IE11 the videos just stop serving. Response code 200 typically, though 206 has been seen often on some.

html:

    <video id="m1-video" class="m1-video story-video active">
        <source src="http://www.somesite.com/videos/m1.webm" type='video/webm;codecs="vp8, vorbis"'/>
        <source src="http://www.somesite.com/videos/m1.mp4?v=1234" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
    </video>

Each video will have an event listener on it, like this:

('#m1-video').get(0).addEventListener('ended', closeM1, false);

And they are typically triggered in a series of callbacks like so:

  $('#cruise').animate({opacity:1, width: $(window).width(), height:$(window).height()}, 1000, function(){

    try {
        $('#m1-video').get(0).currentTime = 0;
    } catch(error) {
        if (error.code === 11) { 
            //do something or nothing. I dont care
        }
    }

    $('#cruise-info').animate({left:0}, 500, function(){
      $('#cruise-info-1 h2').css({top:'50%', opacity:0}).animate({top:'45%', opacity:1}, 1200, 'linear', function(){
          $('#m1-video').fadeIn(500, function(){
            $('#m1-video').get(0).play();       
          });               
      });
    });

  });

htaccess has the video lines in it:

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm

The code is pretty basic. on callback of some routine, find the video and trigger .play() this works in all browsers, and it even works in IE, except that after a while, like 30 page loads, it stops serving videos and gives me a blank screen.

Normal conditions calling something like document.getElementById('m1-video').error returns null. But when it starts acting up document.getElementById('m1-video').error.code returns 4 - which suggests improper encoding. Except that it worked fine for several dozen loads and that same identical encoding profile works for basically every site we build (h264 standard mp4 encoding). Sometimes I can clear browser cache, and close the browser and reopen it, and I will get one video that might finish playing. Usually doesn't. No errors reported.

So maybe someone out there has heard of special instances where using jQuery, dom manipulation and html5 videos in IE11 results in IE stupidity... and perhaps had some way to fix this or at least a better means for troubleshooting than relying on IE's immaculate collection of developer tools.

Never the less, it is worth a shout out to the SO community.

PS - sorry about the verbose post. I don't know if I can succinctly reduce this to a quick question. If I had to try I would say "Has anyone else encountered problems playing html5 videos in IE where constant dom manipulation is happening"

Upvotes: 1

Views: 1046

Answers (1)

Kai Qing
Kai Qing

Reputation: 18833

Answering my own question here:

Turns out IE has some issues loading many video tags on the same page, which is a dynamically loaded page and a massive collection of dom animations all intermixed. I don't know what specifically triggered the problems, but I do know how I fixed it:

I removed all video tags from the dom, and replaced them with container tags:

<div id="c-m1-video">

</div>

Then instead of assuming the video is loaded and present, I create a new video element and add the values, then append them to the container:

   var video = $('<video>').addClass('story-video').attr('id', 'm1-video');
   var src1 = $('<source>').attr('src', 'http://www.somedomain.com/videos/m1-video.webm').attr('type', 'video/webm;codecs="vp8, vorbis"');
   var src2 = $('<source>').attr('src', 'http://www.somedomain.com/videos/m1-video.mp4').attr('type', 'video/mp4;codecs="avc1.42E01E, mp4a.40.2"');

   video.append(src1).append(src2);

   $('#c-m1-video').html(video);

   $('#m1-video').fadeIn(500, function(){
       $('#m1-video').get(0).play();    

       if(!$('#m1-video').data('events'))
       {
           $('#m1-video').get(0).addEventListener('ended', someCallback, false);                     
       }
   });

In the callback, I remove the video:

$('#c-m1-video video').remove();

I also removed any instances of canvas elements used to trick ios into displaying videos at full container width. This related SO article addresses the issue.

I have the htaccess rules in place:

AddType video/mp4 .mp4 .m4v
AddType video/webm .webm

And I moved all videos to the root directory in case the CMS was conflicting. The I added an htaccess rule to ignore the videos directory for the videos.

All together I finally got the videos working on IE11 and IE10. If anyone else has a similar issue, hopefully these tips will help you escape the burning nightmare of IE.

Upvotes: 2

Related Questions