Extending video frame to full-screen from jPlayer using onClick function

Question

functionality:

User is able to access the video page from the main menu. Video will be played automatically, at this moment, the video is not in full screen and for aesthetic purposes, there are no control buttons in the video frame.

Secondly, when user clicks on the video, it will be displayed as full-screen, and when user clicks on the full-screen video, the video will exit the full screen and reverts back to the original video frame size.

What has been done:

I have created the video frame by using the jQuery .jPlayer. And the video is playing automatically when the video page is loaded.

I have attached the following code:

function Footprints() {
  console.log("Footprints");
  
  //Main video player for video page 
  $("#Footprints_1").jPlayer({
    ready: function() {},
    swfPath: "javascript",
    supplied: "webmv, ogv, m4v",
    loop: true,
    size: {
      width: 1450,
      height: 750
    }
  }).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
    $(this).jPlayer("pauseOthers");
  });
  $("#Footprints_1").jPlayer("setMedia", {
    //set m4v tag to array Footprints VideoList
    m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v"
  }).jPlayer("play");
  $("#Footprints_1").show();


  $("Footprints_1").click(function() {
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
  })
}

<div id="Footprints_Page" align="center" style="position:absolute; background-repeat: no-repeat; display: none; top:0px; left:0px; ">

  <!--Video Player-->
  <div id="Footprints_1" style="position:absolute; top: 180px;"></div>

</div>

Hence, when you run the code, it is showing this:

Issue:

At this point, when I click on the video frame when the video is playing, nothing happens. The video doesn't expand to the full screen.

Hence, how am I able to make the video expand to full screen when I click on the video and and when the video is clicked it reverts back to the original size.

Thanks.

Hi Luke, could you provide us with a jsfiddle, so that we can edit and check the outcome.. — Jeremy Rajan, Jan 15 '16 at 03:02
That video is not on Vimeo. It's on the jplayer website, they could simply be blocking leeches. Also, when you click the video, your clicking the video. Your click event is tied to the video container. It could be blocked by the video element when it's added. Do you get 'fullscreen' in the console? — dval, Jan 15 '16 at 03:15
@dval, I have added an external link because, I wouldn't be able to show the video that is from my library. I am intending to add any console control into the video for aesthetic purposes. Hence, how am i able to set the method call that will allow full screen when you click on the video — Luke, Jan 15 '16 at 03:22
what I meant by console: http://i.imgur.com/DCtTVJd.png Your using console.log(message); in your script. I wanted to know if the word 'fullscreen' was getting written when you clicked. — dval, Jan 15 '16 at 05:18

score 1 · Accepted Answer · edited May 23 '17 at 11:59

You are currently fighting ~~two~~ three issues. The first is you are not using jplayer's event system. that is why the clicks are being ignored. I added a bind.click to your jplayer decleration, and the clicks responded.

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
});

See this Fiddle.

The second issue is that you are calling requestFullscreen() on a jQuery object. It is not part of the jQuery API. You need to be calling it on an HTML element.

document.getElementById("jp_video_0").requestFullscreen();

So, the above example should probably be: (untested)

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    document.getElementById("jp_video_0").requestFullscreen();
});

If you want to have some control over padding and placement, request fullscreen on the container, and you can use CSS.

 document.getElementById("Footprints_1").requestFullscreen();

However, the third issue is that not all browsers seem to use the same method of requestFullscreen(). See Mozilla docs. For me the following worked in Chrome:

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    var elem = document.getElementById("Footprints_1");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
})

This Post has more info on fullscreen from jQuery as well as info on x-browser issues.

Hope it helps.

Edit: jsFiddle can't demonstrate the Fullscreen API, because I can not add the required 'AllowFullscreen' attribute to their iframe. If you view the frame source of the jsFiddle result, you can just save that as an HTML document, and it should work.

Thanks!!now, it is showing the "fullscreen" tag, as in responding to the full-screen text, however, it is still not responding to make it full-screen when i do `document.getElementById("Footprints_1").requestFullscreen(); ` and `document.getElementById("jp_video_0").requestFullscreen(); furthermore, what is 'jp_video_0' referring to ` — Luke, Jan 15 '16 at 06:34
@Luke I have updated the answer. It should get `requestFullscreen()` working. `jp_video_0` is the id of the video element, assigned by jplayer. If you right-click on the video and choose 'Inspect' you will see the actual DOM. (i.e. elements added by javascript that are not available in 'view source') I imagine that jplayer probably gives a unique ID to each video on the page, so you might see jp_video_1, jp_video_2, etc. — dval, Jan 15 '16 at 14:07

Extending video frame to full-screen from jPlayer using onClick function

1 Answers1