2012-04-05 14 views
3

私は現在、HTML5ビデオプラグインで作業しています。私のコードは以下のとおりです。カスタムコントロールを使用しようとしています。IE5とFirefoxでフルスクリーンモードのHTML5ビデオ

問題は、フルスクリーンモードをフルスクリーンモードに変更する必要があるのでクリックしたときにフルスクリーンボタンが表示されていることです。これはChromeとIEでは動作しません。

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

こんにちはを追加するためにVARを追加するので、最終的にはあなたはまた、IE 8,9で全画面表示を可能にするために、任意のハックやプラグインに遭遇してきましたか? – SexyBeast

+0

いいえ....まだ:( – coder

+0

ありますか?IE 8/9で要素をフルスクリーンで表示できるものは何ですか? – SexyBeast

答えて

3

IE9は、単にドロップし、最初の...あなたの機能を改善FFとChromeのためのフルスクリーン-API

をサポートしていないため "(0)を取得" 短い "[0]"。次に、あなたの動画へのポインタをキャッシュし、最終的には、コマンドのW3Cバージョン

$('.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 
}; 
関連する問題