Html5 Video - Play/Pause Video On Screen Click

,Hi,

Solution 2:

The shortest way

onclick="this[this.paused ? 'play' : 'pause']()"

The right (but still short) way

...considering you already have your video in variable,
you should generally use event listeners and not hard coded onX attributes...
(even if you have callback!)

var myVideo = document.getElementById("video1");
myVideo.addEventListener('click', function(e){
   e.preventDefault();
   this[this.paused ? 'play' : 'pause']();
});

---

PS: If you are wondering how the hack does the play/pause line work - it is based on the fact that in JavaScript, methods/object functions are basically callable properties of that object and also that in JavaScript, you can reference property directly someObj.someProperty but also through value or variable like someObj["someProperty"] , var prop = "someProperty"; someObj[prop];

... so a long equivalent of the one-liner would be

if (this.paused) {
   this.play();
} else {
   this.pause();
}

Share