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 standard mp4 encoding)。有时我可以清除浏览器缓存，关闭浏览器并重新打开它，我将获得一个可能完成播放的视频。通常不会。没有报告错误。

所以也许有人听说过在IE11中使用jQuery，dom操作和html5视频导致IE愚蠢的特殊情况......并且可能有一些方法可以解决这个问题，或者至少有一种更好的方法来排除故障，而不是依赖于IE浏览器完美无瑕的开发人员工具集。

从不如此，值得向SO社区大喊大叫。

PS - 对于冗长的帖子感到抱歉。我不知道我是否可以简洁地将其简化为一个快速的问题。如果我不得不尝试，我会说＆＃34;是否有其他人在IE中播放html5视频时遇到问题，其中正在进行持续的dom操作＆＃34;

Answer 1

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

结果显示IE在同一页面上加载了许多视频标签存在一些问题，这是一个动态加载的页面和大量的dom动画集合。我不知道是什么原因引发了这些问题，但我知道我是如何解决的：

我从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的噩梦。

IE和html5视频停止工作

1 个答案: