IE9和Firefox中的全屏模式HTML5视频

问题描述

我正在制作一个HTML5视频插件，下面是我的代码并试图使用自定义控件。

I am curently working on a HTML5 video Plugin and below is my code and trying to work with custom controls.

问题是我有全屏按钮时我点击它，视频需要将其更改为全屏模式。我能够在Chrome中使用它，但不能在IE和Firefox中使用。

The problem is I am having a fullscreen button when I click it the video needs to change it to Fullscreen mode.I am able to get it worked in chrome but not in IE and 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;
});

任何人都可以建议我如何修改它以实现我的目标？

Can anyone suggest me how do I modify this in order to achieve my goal?

推荐答案

ie9不支持全屏-api

ie9 does not support the fullscreen-api

用于FF和Chrome只是改善你的function ...首先，删除get（0）为较短的[0]。然后添加一个var来缓存指向你视频的指针，最后添加w3c版本的命令

for FF and Chrome simply improve your function... first, drop the "get(0)" for the shorter "[0]". Then add a var to cache the pointer to your video and finally add the w3c version of the command

$('.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
};

这篇关于IE9和Firefox中的全屏模式HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！