3

私は現在 HTML5 ビデオ プラグインに取り組んでおり、以下は私のコードで、カスタム コントロールを操作しようとしています。

問題は、クリックするとフルスクリーン ボタンが表示され、ビデオをフルスクリーン モードに変更する必要があることです。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;
});

目標を達成するためにこれをどのように変更すればよいか、誰かに提案できますか?

4

1 に答える 1

3

ie9はfullscreen-apiをサポートしていません

FFとChromeの場合、関数を改善するだけです...まず、短い「[0]」の「get（0）」を削除します。次に、varを追加してビデオへのポインターをキャッシュし、最後に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
};
于 2012-04-06T09:25:40.657 に答える