,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="/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
I try to use html5 video from below website
.asp?filename=tryhtml5_video_js_prop
How can i play/pause video on video screen click ?
Any help will be appreciated.
Thanks.
,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/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
I try to use html5 video from below website
http://www.w3schools./html/tryit.asp?filename=tryhtml5_video_js_prop
How can i play/pause video on video screen click ?
Any help will be appreciated.
Thanks.
Share Improve this question asked Jun 3, 2014 at 11:31 user3702848user3702848 1552 gold badges2 silver badges5 bronze badges 2- 1 <video onclick="playPause()" id="video1" width="420"> solved the problem – user3702848 Commented Jun 3, 2014 at 11:34
- possible duplicate of Click the poster image the HTML5 video plays? – Daniel Golden Commented Jan 29, 2015 at 17:36
2 Answers
Reset to default 6Simply you can call the function video on click
<video id="video1" onClick="playPause();">
...
</video>
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();
}