making html5 video to fullscreen

I have a custome HTML5 Video player, where in the HTML Page there is a video tag and another DIV tag where i have put the controls. The Control DIV has play button,Pause button, Fullscreen button etc. Now i am trying to make the video full screen on the click of the full screen button. I have written the code making the use of requestFullscreen(). This code is not throwing any error but its neither working. Could someone please tell me where i am going wrong??

var controls = {
video: $("#player"),  //this is the video element
fullscreen: $("#fullscreen")  //This is the fullscreen button.
};

controls.fullscreen.click(function(){
var elem = controls.fullscreen;
if (elem.requestFullscreen) {
    controls.video.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
    controls.video.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
    controls.video.webkitRequestFullscreen();
}
});

Answers


controls.fullscreen and controls.video are both jQuery objects, not DOM elements. You want the elements inside the jQuery objects, which you can get with .get:

var controls = {
    video: $("#player").get(0),  //this is the video element
    fullscreen: $("#fullscreen").get(0)  //This is the fullscreen button.
};

jQuery objects don't have a requestFullscreen property, so none of your if statement were running (and if they had run, video.requestFullscreen wold have failed).


Need Your Help

Three state checked TextView in a ListView

android android-listview android-textview

I needed a CheckedTextView with three states (basicly "ignore", "include" and "exclude"), so I build my own view and it works. But I want to embed my ThreeStateTextView in a ListView, and this does...

Save MKOverlay objects in Core Data

objective-c ios core-data mkmapview mkoverlay

I have a large MKOverlay that I would like to be saved in Core Data so that I don't have to create it later. Since this isn't one of the types that you can choose in Core Data, how do I go about sa...