Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/video/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
IE9和Firefox中具有全屏模式的HTML5视频_Html_Video_Fullscreen - Fatal编程技术网

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

IE9和Firefox中具有全屏模式的HTML5视频,html,video,fullscreen,Html,Video,Fullscreen,我现在正在开发一个HTML5视频插件,下面是我的代码,并尝试使用自定义控件 问题是,当我点击它时,我有一个全屏按钮。视频需要将其更改为全屏模式。我可以在chrome中使用它,但在IE和Firefox中无法使用 function addvideo() { var addvideo = $('<canvas id="canvas" height="468" width="560"></canvas><div class="videocontai

我现在正在开发一个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');
        }

有人能建议我如何修改它以实现我的目标吗?

ie9不支持全屏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
};

嗨,那么最后你有没有遇到任何黑客或插件,使IE 8,9全屏也?有没有任何可用的?在IE 8/9中,任何可以全屏渲染元素的东西?
$('.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
};