2012-04-05 69 views
3

我curently工作在HTML5視頻插件以下是我的代碼,並試圖與自定義控件的工作。HTML5視頻與全屏模式在IE9和Firefox

的問題是我有一個全屏按鈕,當我點擊它的視頻需要將其更改爲全屏mode.I我能得到它的工作在Chrome,但不是在IE和Firefox。

function addvideo() { 
      var addvideo = $('<canvas id="canvas" height="468" width="560"></canvas><div class="videocontainer"><video id="video1"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg; codecs="theora, vorbis""><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg; codecs="theora, vorbis""><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm type="video/WebM; codecs="vp8, vorbis""></video></div>'); 
      $(addvideo).appendTo('#video'); 
     } 

function addcontrols() { 
      var controls = $('<table><tr class="controls"><td id="playbtn" class="playbtn" title="Play/Pause"><td id="elapsedtimer" class="elapsedtimer">00:00</td><td id="videoslider" class="videoslider"></td><td id="totaltimer" class="totaltimer">00:00</td><td class="HD"></td><td class="fullscreen"></td><td><td id="volumeslider" class="volumeslider"></td><td class="volumeon" title="Mute/Unmute"></td></tr></table>'); 
      $(controls).appendTo('#controlspane'); 
     } 

這是全屏模式的功能:

$('.fullscreen').on('click', function() { 
$('#video1').get(0).webkitEnterFullscreen(); 
$('#video1').get(0).mozRequestFullScreen(); 
return false; 
}); 

任何人都可以給我建議如何修改這個爲了達到我的目標?

+0

喜的W3C版本,所以最後你有沒有遇到任何黑客或插件來實現全屏幕的IE 8,9也? – SexyBeast 2013-01-24 09:07:39

+0

沒有....尚未:( – coder 2013-01-24 11:38:53

+0

是否有任何可用?任何事情,可以渲染元素全屏幕的IE 8/9? – SexyBeast 2013-01-24 11:55:10

回答

3

IE9不支持全屏-API

爲FF和Chrome只是提高你的函數...首先,刪除 「拿到(0)」 爲短 「[0]」。然後添加一個變種指針緩存到視頻最後加命令

$('.fullscreen').on('click', function() { 
var a = $('#video1')[0], 
    fsReturn = a.requestFullscreen ? a.requestFullscreen() : // W3C 
    a.webkitRequestFullScreen ? a.webkitRequestFullScreen() : // Chrome 
    a.mozRequestFullScreen ? a.mozRequestFullScreen() : false; // Firefox 
};