How do you change video src using jQuery

Question

How do you change the src of a HTML5 video tag using jQuery   I got this HTML    lt div id  divVideo  gt     lt video controls gt       lt source src  test1 mp4  type  video mp4    gt     lt  video gt   lt  div gt    This doesn t work   var videoFile    test2 mp4       divVideo video source   attr  src   videoFile     It changes the src if I inspect it using firebug  but does not actually change the video being played   I read about  pause   and  load    but I m not sure how to use them

User · Answer

I would rather make it like this   lt video  id  v1  width  320  height  240  controls  controls  gt    lt  video gt    and then use       v1   html   lt source src  test1 mp4  type  video mp4  gt  lt  source gt

User · Answer

What worked for me was issuing the  play  command after changing the source  Strangely you cannot use  play    through a jQuery instance so you just use getElementByID as follows   HTML   lt video id  videoplayer  width  480  height  360  gt  lt  video gt    JAVASCRIPT      videoplayer   html   lt source src    strSRC    type    strTYPE    gt  lt  source gt      document getElementById  videoplayer   play

User · Answer

Try     divVideo video   0  load    after you changed the src attribute

User · Answer

I ve tried using the autoplay tag  and  load    play   still need to be called at least in chrome  maybe its my settings    the simplest cross browser way to do this with jquery using your example would be  var  video       divVideo video    videoSrc      source    video  attr  src   videoFile    video 0  load     video 0  play      However the way I d suggest you do it  for legibility and simplicity  is  var video       divVideo video   0   video src   videoFile  video load    video play      Further Reading http   msdn microsoft com en-us library ie hh924823 v vs 85  aspx ManagingPlaybackInJavascript  Additional info   load   only works if there is an html source element inside the video element  i e   lt source src  demo mp4  type  video mp4    gt    The non jquery way would be   HTML   lt div id  divVideo  gt     lt video id  videoID  controls gt       lt source src  test1 mp4  type  video mp4    gt     lt  video gt   lt  div gt    JS  var video   document getElementById  videoID    video src   videoFile  video load    video play

User · Answer

JQUERY   x000D   x000D   lt script type  text javascript  gt  x000D    document  ready function     x000D    var videoID    videoclip   x000D    var sourceID    mp4video   x000D    var newmp4    media video2 mp4   x000D    var newposter    media video-poster2 jpg   x000D    x000D        videolink1   click function event    x000D            videoID  get 0  pause    x000D            sourceID  attr  src   newmp4   x000D            videoID  get 0  load    x000D               videoID  attr  poster   newposter     Change video poster x000D            videoID  get 0  play    x000D        x000D      x000D   x000D   x000D

User · Answer

This is working on Flowplayer 6 0 2    lt script gt      flowplayer   load            sources                  type   video mp4    src  variable                              lt  script gt    where variable is a javascript jquery variable value  The video tag should be something this   lt div class  flowplayer  gt      lt video gt         lt source type  video mp4  src    class  videomp4  gt      lt  video gt   lt  div gt    Hope it helps anyone

User · Answer

The easiest way is using autoplay    lt video autoplay gt  lt  video gt    When you change src through javascript you don t need to mention load

User · Answer

document  ready function               setTimeout function                              imgthumbnew   click function                                  divVideo video   attr                                src     this  data  item                                 autoplay    autoplay                                                                                2000                               here   imgthumbnew  is the class of images which are thumbs of videos  an extra attribute is given to them which have video url  u can change according to your convenient  i would suggest you to give an ID to ur Video tag it would be easy to handle

[jquery] How do you change video src using jQuery?

Examples related to jquery

Examples related to video

Examples related to html