HTML5 video full screen in IE9 and Firefox
I am currently working on an HTML5 video plugin and below is my code and trying to work with custom controls.
The problem is that I have a full screen button when I click on it to change it full screen. I can get it to work in chrome, but not 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');
}
This is the full screen feature:
$('.fullscreen').on('click', function() {
$('#video1').get(0).webkitEnterFullscreen();
$('#video1').get(0).mozRequestFullScreen();
return false;
});
Can anyone suggest me how I should change this to achieve my goal?
+3
source to share
1 answer
ie9 does not support fullscreen-api
for FF and Chrome just improve your function ... first drop "get (0)" for the shorter "[0]". Then add 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
};
+3
source to share