跨瀏覽器添加/刪除MediaElementJS視頻

我使用MediaElementJS http://mediaelementjs.com/ 所以我可以流媒體瀏覽器，如IE6 + MP4視頻等跨瀏覽器添加/刪除MediaElementJS視頻

我想它使得視頻最初是不可見的，然後它彈出並可以隱藏，然後可能會回來，從一開始就重播。

可能的方法包括最初隱藏的視頻，然後顯示它，然後再次隱藏它...

或動態創建的視頻對象，然後將其刪除，然後創建一個新的視頻對象......

的iPad：OK，IE9：OK，鉻：OK

火狐：「秀」必須按下兩次，沒有任何聲音。 http://vc4hp.net/vidtest/test5f.php最初顯示視頻而不是隱藏（並且禁用自動播放）。如果您立即播放視頻（您需要按「顯示」），則聲音起作用。如果你隱藏然後再播放，聲音不起作用。

IE6-IE8：需要按「顯示」兩次......如果延遲太短，則不播放視頻或者有聲音空白屏幕。如果延遲足夠，則視頻正常播放。（我還沒有能夠使它顯示視頻的顯卡，而在同一時間只需要的「顯示」一個出版社）

$(document).ready(function(){ 
    $('#videocontainer').hide(); 
    $("#show").click(function() { 
     $('#videocontainer').show('slow'); 
     if (nativeMP4) { 
      $('#player1').attr('src','comm5intro.mp4'); 
     } 
     else { 
      if (my_media.length > 0) { 
       my_media[0].setSrc('comm5intro.mp4'); 
       my_media[0].play(); 
      } 
     }   
    });  
    $("#hide").click(function() { 
     $('#videocontainer').hide('slow'); 
     if (nativeMP4) { 
      $('video')[0].pause(); 
     } 
     else { 
      if (my_media.length > 0) { 
       my_media[0].pause(); 
      } 
     }   
    });   
});

由於Firefox的問題沒有聲音，我已經試過一種不同的方法 - 其中視頻對象被創建和銷燬：

http://vc4hp.net/vidtest/test11.php

ipad公司：OK（「顯示」使視頻出現[不當然自動播放]，「隱藏」使視頻消失等）

IE9：首先按「顯示」和「隱藏」的作品。第二次按下「顯示」會一次播放兩個視頻，當您按下「隱藏」時不會被刪除。

Firefox：「顯示」會使視頻顯示，「隱藏」不會執行任何操作。 Chrome瀏覽器：「顯示」通常會產生回聲 - 即使檢測到原生MP4支持的目的是阻止其播放的第二個版本，也可能播放兩個視頻。「隱藏」會停止回顯，表示其他視頻仍在播放。

IE6-IE8：和Firefox一樣，「顯示」讓另一個視頻出現並開始播放。「隱藏」什麼都不做。

$(document).ready(function(){ 
    $("#show").click(function() { 
     $('#videocontainer').append('<video id="player1" width="640" height="460" src="comm5intro.mp4" type="video/mp4" controls="controls" autoplay="true"></video>'); 
     var v = document.createElement('video'); 
     if (v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) { 
      // native MP4 support 
      alert('Native MP4 Support'); 
     } 
     else { 
      $('#videocontainer video').mediaelementplayer({features: ['playpause','progress','volume']}); 
     } 
    });  
    $("#hide").click(function() { 
     $('#videocontainer video').remove(); 
    });  
});

我希望這些方法中的一個或兩個在儘可能多的瀏覽器中正常工作。

下面是正確播放視頻在所有我檢查瀏覽器版本...

http://vc4hp.net/vidtest/test.html

雖然按鈕似乎並不在IE7和IE8工作。

這裏是一個zip文件的主要文件....http://vc4hp.net/vidtest/mediaelementjs.zip

來源

2012-06-16 Luke Wenke