javascript - Video Onclick function for playing a video - Stack Overflow

admin管理员组

文章数量:1402800

I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .

I have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 14, 2015 at 9:20 Sonu SandeepSonu Sandeep 8111 gold badge11 silver badge99 bronze badges 4

• Where do you click? can you post some code? – Sandeep Nayak Commented Oct 14, 2015 at 9:28
• 1 Something like this $( document ).ready(function() { $('YOUR_VIDEO_ID').click(function() { $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); }); }); – Sandeep Nayak Commented Oct 14, 2015 at 9:29
• Thank you @SandeepNayak – Sonu Sandeep Commented Oct 14, 2015 at 9:53
• I ll post that as an answer then! – Sandeep Nayak Commented Oct 14, 2015 at 9:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Below your html code

  <video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
        <source src="put here your video url" type="video/mp4">      
   </video>

Below jquery code

  var video = document.getElementById("video");
  video.addEventListener("click", function(event) { 
        if (video.paused == true) {
             video.play();
        }
        else{
             video.pause();
        }
  });

You can play or pause a vide like this. This should be able to toggle:

$(document).ready(function(){ 
    $('YOUR_VIDEO_ID_OR_CLASS').click(function(){ 
       $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); 
    }); 
 });

An easy way could be like this:

$(function() {
    var video = $('video')[0];
    $('button').click(function() {
        if( video.paused ) {
            video.play();
        }
        else {
            video.pause();
        }
    });
});

Fiddle Example

You can change 'button' to another element as trigger for the play/pause. You can also change it to the video it self, if you want just to click on the video to play and pause it.

This is what you need:

<script type="text/javascript"> 
function vidplay() { 
var video = document.getElementById("Video1"); 
var button = document.getElementById("play"); 
if (video.paused) { 
video.play(); 
button.textContent = "||";
 } 
else 
{ 
video.pause(); 
button.textContent = ">"; 
} 
} 
</script> 

本文标签： javascriptVideo Onclick function for playing a videoStack Overflow