2012-04-05 77 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 
};