Html5 Video - Play/Pause video on screen click

Question

,Hi,

    <!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body> 
</html>

I try to use html5 video from below website

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

How can i play/pause video on video screen click ?

Any help will be appreciated.

Thanks.

possible duplicate of [Click the poster image the HTML5 video plays?](http://stackoverflow.com/questions/5278262/click-the-poster-image-the-html5-video-plays) — Daniel Golden, Jan 29 '15 at 17:36

score 6 · Accepted Answer · answered Jun 03 '14 at 11:39

6

Simply you can call the function video on click

<video id="video1" onClick="playPause();">
...
</video>

answered Jun 03 '14 at 11:39

shabeer

1,064
9
17

1

better to call this on video object itself otherwise clicking on anyother element will stop the video. – Jai Jun 03 '14 at 11:42

score 2 · Answer 2 · answered Jun 18 '20 at 23:17

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();
}

Html5 Video - Play/Pause video on screen click

2 Answers2

The shortest way

The right (but still short) way

Linked