IE和html5視頻剛剛停止工作

Question

我正在使用jQuery隱藏和顯示復雜的頁面。 該頁面中有許多視頻標簽。 最終，在IE11中，視頻停止播放。 盡管在某些情況下經常會看到206，但是響應代碼通常為200。

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社區大聲疾呼。

附言：對冗長的帖子表示抱歉。 我不知道是否可以將其簡化為一個簡短的問題。 如果必須嘗試，我會說“是否有人在不斷進行dom操作的IE中播放html5視頻時遇到問題”

Answer 1

在這里回答我自己的問題：

事實證明IE在同一頁面上加載許多視頻標簽時遇到了一些問題，這是一個動態加載的頁面，並且大量dom動畫混合在一起。 我不知道是什么引起了這些問題，但是我確實知道如何解決它：

我從dom中刪除了所有視頻標簽，並用容器標簽替換了它們：

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

</div>

然后，我不假設視頻已加載並顯示，而是創建了一個新的video元素並添加了值，然后將其附加到容器中：

   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元素實例。 這篇相關的SO文章解決了這個問題。

我有htaccess規則：

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

然后，我將所有視頻都移到了根目錄，以防CMS發生沖突。 我添加了htaccess規則來忽略視頻的視頻目錄。

總之，我終於得到了適用於IE11和IE10的視頻。 如果其他人也遇到類似的問題，希望這些技巧將幫助您擺脫IE燃燒的噩夢。