Play pause HTML 5 video using JQuery

Question

I am trying to control HTML5 videos using JQuery  I have two clips in a tabbed interface  there are six tabs in total  the others just have images  I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked   This must be a simple thing to do but I cant seem to get it to work  the code I am using to play the video is       playMovie1   click function          movie1   play                I have read that the video element needs to be exposed in a function to be able to control it but can t find an example  I am able to make it work using JS   document getElementById  movie1   play      Any advice would be great  Thanks

User · Answer

Sorry for my other answer  No-one liked it  but I have found another way that you can do it  You can use Video js  You can find the documentation and how-to s here

User · Answer

enter code here  lt form class  md-form  action     gt     lt div class  file-field  gt       lt div class  btn btn-primary btn-sm float-left  gt         lt span gt Choose files lt  span gt         lt input type  file  multiple gt       lt  div gt       lt div class  file-path-wrapper  gt         lt input class  file-path validate  type  text  placeholder  Upload one or more files  gt       lt  div gt     lt  div gt   lt  form gt    lt video  width  320  height  240  id  keerthan  gt  lt  video gt    lt button onclick  playVid    type  button  gt Play Video lt  button gt   lt button onclick  pauseVid    type  button  gt Pause Video lt  button gt    lt script gt       function localFileVideoPlayer        var playSelectedFile   function  event        var file   this files 0      var type   file type     var videoNode   document querySelector  video           var fileURL   URL createObjectURL file      videoNode src   fileURL       var inputNode   document querySelector  input     inputNode addEventListener  change   playSelectedFile  false       function playVid        keerthan play         function pauseVid        keerthan pause          lt  script gt

User · Answer

For pausing multiple videos I have found that this works nicely      video   each function          this  get 0  pause          This can be put into a click function which is quite handy

User · Answer

This is how I managed to make it work   jQuery  document   ready function              myHTMLvideo   click function             this paused   this play     this pause                  All my HTML5  tags have the class  myHTMLvideo

User · Answer

By JQuery using selectors     video selector   trigger  play         video selector   trigger  pause       div video first   trigger  play      div video first   trigger  pause        video ID   trigger  play       video ID   trigger  pause      By Javascript using ID  video ID play     video ID pause      OR  document getElementById  video ID   play     document getElementById  video ID   pause

User · Answer

loneSomeday explained it beautifully   here one solution which might also give you good idea how to achieve play pause functionality   play pause of video on click

User · Answer

Found the answer here  ToolmakerSteve  but had to fine tune this way  To pause all    video   each function index         this  get 0  pause         or to play all    video   each function index         this  get 0  play

User · Answer

lt video style  min-width  100   min-height  100     id  vid  width  auto  height  auto  controls autoplay  true  loop  loop  preload  auto  muted  muted  gt   lt source src  video sample mp4  type  video mp4  gt   lt source src  video sample ogg  type  video ogg  gt   lt  video gt   lt script gt     document  ready function    document getElementById  vid   play         lt  script gt

User · Answer

Just as a note  make sure you check if the browser supports the video function  before you try to invoke it   if     movie1   0  play          movie1   0  play      That will prevent JavaScript errors on browsers that don t support the video tag

User · Answer

This is the easy methods we can use  on jquery button click function      button   click function event          video   trigger  play           video   trigger  pause        Thanks

User · Answer

x000D   x000D  var vid   document getElementById  myVideo     x000D  function playVid      x000D    vid play     x000D     x000D  function pauseVid      x000D    vid pause     x000D     x000D   lt video id  myVideo  width  320  height  176  gt  x000D     lt source src  http   commondatastorage googleapis com gtv-videos-bucket sample BigBuckBunny mp4  type  video mp4  gt  x000D     lt source src  http   commondatastorage googleapis com gtv-videos-bucket sample BigBuckBunny ogg  type  video ogg  gt  x000D    Your browser does not support HTML5 video  x000D   lt  video gt  x000D   lt button onclick  playVid    type  button  gt Play Video lt  button gt  x000D   lt button onclick  pauseVid    type  button  gt Pause Video lt  button gt  lt br gt   x000D   x000D   x000D

User · Answer

Why do you need to use jQuery  Your proposed solution works  and it s probably faster than constructing a jQuery object   document getElementById  videoId   play

User · Answer

You could use the basic HTML player or you can make your own custom one  Just saying  If you want you can refer to     https   codepen io search pens q video player and have a scroll through or not  It is to to you

User · Answer

As an extension of lonesomeday s answer  you can also use      playMovie1   click function            movie1   0  play          Notice that there is no get   or eq   jQuery function called  DOM s array used to call play   function  It s a shortcut to keep in mind

User · Answer

I also made it work like this       window  scroll function         if   window  scrollTop    gt  0          document querySelector   video   pause        else         document querySelector   video   play

User · Answer

You can do     video   trigger  play       video   trigger  pause

User · Answer

I use FancyBox and jQuery to embedd a video  Give it an ID   Perhaps not the BEST solution could toggle play pause differently - but easy for me and IT WORKS      In the       lt input type  hidden  id  current video playing  gt    lt input type  hidden  id  current video status  value  playing  gt    lt video id  video-1523  autobuffer  false  src  movie mp4  gt  lt  video gt    lt script gt      Play Pause with spacebar    document  keypress function e          theVideo   document getElementById  current video playing   value      if  e which    32             if  document getElementById  current video status   value     playing                  document getElementById theVideo  pause                 document getElementById  current video status   value    paused             else                document getElementById  current video status   value    playing               document getElementById theVideo  play                             lt  script gt

User · Answer

use this       video1   attr   autoplay   true

User · Answer

Your solution shows the issue here -- play is not a jQuery function but a function of the DOM element   You therefore need to call it upon the DOM element   You give an example of how to do this with the native DOM functions   The jQuery equivalent -- if you wanted to do this to fit in with an existing jQuery selection -- would be     videoId   get 0  play      get gets the native DOM element from the jQuery selection

User · Answer

I like this one      video   click function        this this paused    play     pause            Hope it helps

[jquery] Play/pause HTML 5 video using JQuery

Examples related to jquery

Examples related to css

Examples related to html

Examples related to html5-video