javascript - IE 和 html5 视频停止工作

Question

我正在使用 jQuery 来隐藏和显示复杂的页面。该页面中有许多视频标签。最终，在 IE11 中，视频停止提供。响应代码通常为 200，但在某些情况下经常会看到 206。

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>

每个视频都会有一个事件监听器，如下所示:

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

它们通常是在一系列回调中触发的，如下所示:

  $('#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 中有视频行:

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

代码非常基本。在某些例程的回调中，找到视频并触发 .play() 这适用于所有浏览器，甚至适用于 IE，除了一段时间后，例如 30 个页面加载，它会停止提供视频并给我一个空白屏幕。

正常情况下调用 document.getElementById('m1-video').error 之类的内容会返回 null。但是当它开始起作用时 document.getElementById('m1-video').error.code 返回 4 - 这表明编码不正确。除了它可以在几十个负载下正常工作，并且相同的编码配置文件基本上适用于我们构建的每个网站(h264标准mp4编码)。有时我可以清除浏览器缓存，然后关闭浏览器并重新打开它，我会得到一个可能完成播放的视频。通常不会。没有报告错误。

所以也许有人听说过在 IE11 中使用 jQuery、dom 操作和 html5 视频会导致 IE 愚蠢的特殊情况...也许有一些方法可以解决这个问题，或者至少有比依赖更好的故障排除方法IE 完美的开发者工具集合。

无论如何，SO 社区还是值得一提的。

PS - 对于冗长的帖子感到抱歉。我不知道我是否可以简洁地把这个问题简化为一个简单的问题。如果我必须尝试，我会说“有其他人在 IE 中播放 html5 视频时遇到问题吗，其中不断发生 dom 操作”

Answer 1

在这里回答我自己的问题:

事实证明，IE 在同一页面上加载许多视频标签时存在一些问题，该页面是一个动态加载的页面和大量混合的 dom 动画。我不知 Prop 体是什么引发了问题，但我知道如何解决它:

我从dom中删除了所有视频标签，并用容器标签替换它们:

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

</div>

然后，我不假设视频已加载并存在，而是创建一个新的视频元素并添加值，然后将它们附加到容器中:

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

在回调中，我删除了视频:

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

我还删除了用于欺骗 ios 以整个容器宽度显示视频的 Canvas 元素的任何实例。 This related SO article解决了这个问题。

我已经制定了 htaccess 规则:

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

我将所有视频移至根目录，以防 CMS 发生冲突。我添加了一个 htaccess 规则来忽略视频的视频目录。

总之，我终于让视频可以在 IE11 和 IE10 上运行了。如果其他人也有类似的问题，希望这些提示能帮助您摆脱 IE 的噩梦。