Difference between jQuery dblclick() Event and Html ondblclick() Event

Question

I am doing a project whereby I need the video to turn fullscreen after i double clicked it. I tried 2 ways to do so. The first of which works fine but the second does not. and i dont understand why is that so?

First way (the one which works fine using dblclick jquery): js

var elem = document.getElementsByClassName("video")[0];
function makefullscreen(){
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    });

html

      <video class="video" autoplay ondblclick="makefullscreen()">
          <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
      </video>

Second way (the one which did not work using html ondblclick):

js

$(".video").dblclick(function(){
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    });

html

        <video class="video" autoplay>
          <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
        </video>

Event associated is different but the concept is same and will address the issue. Hence marked as dupe — Rajesh, Jan 01 '20 at 13:59

Marios Nikolaou · Accepted Answer · 2020-01-01T14:27:55.633

1

Try inside .ready because the DOM elements should be loaded first.Also check if it works using .on()

$(document).ready(function(){
$(".video").on("dblclick",function(){

    if (this.requestFullscreen) {
        this.requestFullscreen();
      } else if (this.mozRequestFullScreen) { /* Firefox */
        this.mozRequestFullScreen();
      } else if (this.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        this.webkitRequestFullscreen();
      } else if (this.msRequestFullscreen) { /* IE/Edge */
        this.msRequestFullscreen();
      }
    });

});

});

edited Jan 01 '20 at 14:27

answered Jan 01 '20 at 13:56

Marios Nikolaou

1,326
1
13
24

Also note that `elem` isn't defined anywhere; that should probably `this` instead – Pointy Jan 01 '20 at 14:05
@Pointy as it looks yes. – Marios Nikolaou Jan 01 '20 at 14:27

Difference between jQuery dblclick() Event and Html ondblclick() Event

1 Answers1