changing source on html5 video tag

Question

i m trying to build a video player  that works everywhere  so far i d be going with    lt video gt       lt source src  video mp4  gt  lt  source gt       lt source src  video ogv  gt  lt  source gt       lt object data  flowplayer swf  type  application x-shockwave-flash  gt           lt param name  movie  value  flowplayer swf    gt           lt param name  flashvars  value  config   clip   video mp4      gt       lt  object gt   lt  video gt     as seen on several sites  for example video for everybody  so far  so good   but now i also want some kind of playlist menu along with the video player  from which i can select other videos  those should be opened within my player right away  so i will have to  dynamically change the source of the video   as seen on dev opera com articles everything-you-need-to-know-html5-video-audio  - section  Let s look at another movie   with javascript  let s forget about the flashplayer  and thus IE  part for the time being  i will try to deal with that later   so my JS to change the  lt source gt  tags should be something like    lt script gt  function loadAnotherVideo         var video   document getElementsByTagName  video   0       var sources   video getElementsByTagName  source        sources 0  src    video2 mp4       sources 1  src    video2 ogv       video load       lt  script gt    problem is  this doesnt work in all browsers  namely  firefox  O there is a nice page  where you can observe the problem i m having  http   www w3 org 2010 05 video mediaevents html  as soon as i trigger the load   method  in firefox  mind you   the video player dies   now i have found out that when i don t use multiple  lt source gt  tags  but instead just one src attribute within the  lt video gt  tag  the whole thing DOES work in firefox   so my plan is to just use that src attribute and determine the appropriate file using the canPlayType   function   am i doing it wrong somehow or complicating things

User · Answer

Try moving the OGG source to the top  I ve noticed Firefox sometimes gets confused and stops the player when the one it wants to play  OGG  isn t first   Worth a try

User · Answer

According to the spec     Dynamically modifying a source element and its attribute when the   element is already inserted in a video or audio element will have no   effect  To change what is playing  just use the src attribute on the   media element directly  possibly making use of the canPlayType     method to pick from amongst available resources  Generally    manipulating source elements manually after the document has been   parsed is an unncessarily complicated approach    So what you are trying to do is apparently not supposed to work

User · Answer

Using the  lt source   gt  tags proved difficult for me in Chrome 14 0 835 202 specifically  although it worked fine for me in FireFox   This could be my lack of knowledge  but I thought an alternate solution might be useful anyway    So  I ended up just using a  lt video   gt  tag and setting the src attribute right on the video tag itself   The canPlayVideo   lt mime type gt    function was used to determine whether or not the specific browser could play the input video   The following works in FireFox and Chrome     Incidently  both FireFox and Chrome are playing the  ogg  format  although Chrome recommends  webm    I put the check for browser support of  ogg  first only because other posts have mentioned that FireFox prefers the ogg source first  i e   lt source src       type  video ogg   gt      But  I haven t tested  and highly doubt  whether or not it the order in the code makes any difference at all when setting the  src  on the video tag   HTML   lt body onload  setupVideo     gt       lt video id  media  controls  true  preload  auto  src    gt       lt  video gt   lt  body gt    JavaScript   function setupVideo               You will probably get your video name differently        var videoName    http   video-js zencoder com oceans-clip mp4              Get all of the uri s we support        var indexOfExtension   videoName lastIndexOf                window alert  found index of extension     indexOfExtension          var extension   videoName substr indexOfExtension  videoName length - indexOfExtension            window alert  extension is     extension          var ogguri   encodeURI videoName replace extension    ogv            var webmuri   encodeURI videoName replace extension    webm            var mp4uri   encodeURI videoName replace extension    mp4              window alert   URI is     webmuri               Get the video element        var v   document getElementById  media           window alert   media is     v              Test for support        if  v canPlayType  video ogg                  v setAttribute  src   ogguri                window alert  can play ogg                    else if  v canPlayType  video webm                 v setAttribute  src   webmuri                window alert  can play webm                    else if  v canPlayType  video mp4                 v setAttribute  src   mp4uri                window alert  can play mp4                    else              window alert  Can t play anything                    v load          v play

User · Answer

Just put a div and update the content      lt script gt  function setvideo src        document getElementById  div video   innerHTML     lt video autoplay controls id  video ctrl  style  height  100px  width  100px   gt  lt source src    src    type  video mp4  gt  lt  video gt        document getElementById  video ctrl   play       lt  script gt   lt button onClick  setvideo  video1 mp4     gt Video1 lt  button gt   lt div id  div video  gt   lt  div gt

User · Answer

I have been researching this for quite a while and I am trying to do the same thing  so hopefully this will help someone else  I have been using crossbrowsertesting com and literally testing this in almost every browser known to man  The solution I ve got currently works in Opera  Chrome  Firefox 3 5   IE8   iPhone 3GS  iPhone 4  iPhone 4s  iPhone 5  iPhone 5s  iPad 1   Android 2 3   Windows Phone 8   Dynamically Changing Sources  Dynamically changing the video is very difficult  and if you want a Flash fallback you will have to remove the video from the DOM page and re-add it so that Flash will update because Flash will not recognize dynamic updates to Flash vars  If you re going to use JavaScript to change it dynamically  I would completely remove all  lt source gt  elements and just use canPlayType to set the src in JavaScript and break or return after the first supported video type and don t forget to dynamically update the flash var mp4  Also  some browsers won t register that you changed the source unless you call video load    I believe the issue with  load   you were experiencing can be fixed by first calling video pause    Removing and adding video elements can slow down the browser because it continues buffering the removed video  but there s a workaround   Cross-browser Support  As far as the actual cross-browser portion  I arrived at Video For Everybody as well  I already tried the MediaelementJS Wordpress plugin  which turned out to cause a lot more issues than it resolved  I suspect the issues were due to the Wordpress plug-in and not the actually library  I m trying to find something that works without JavaScript  if possible  So far  what I ve come up with is this plain HTML    lt video width  300  height  150  controls  controls  poster  http   sandbox thewikies com vfe-generator images big-buck-bunny poster jpg  class  responsive  gt   lt source src  http   clips vorwaerts-gmbh de big buck bunny ogv  type  video ogg    gt   lt source src  http   clips vorwaerts-gmbh de big buck bunny mp4  type  video mp4    gt   lt source src  http   clips vorwaerts-gmbh de big buck bunny webm  type  video webm    gt   lt source src  http   alex-watson net wp-content uploads 2014 07 big buck bunny iphone mp4  type  video mp4    gt   lt source src  http   alex-watson net wp-content uploads 2014 07 big buck bunny iphone3g mp4  type  video mp4    gt   lt object type  application x-shockwave-flash  data  http   releases flowplayer org swf flowplayer-3 2 1 swf  width  561  height  297  gt       lt param name  movie  value  http   releases flowplayer org swf flowplayer-3 2 1 swf    gt       lt param name  allowFullScreen  value  true    gt       lt param name  wmode  value  transparent    gt       lt param name  flashVars  value  config   playlist    http   sandbox thewikies com vfe-generator images big-buck-bunny poster jpg    url   http   clips vorwaerts-gmbh de big buck bunny mp4   autoPlay  false       gt       lt img alt  No Video  src  http   sandbox thewikies com vfe-generator images big-buck-bunny poster jpg  width  561  height  297  title  No video playback capabilities  please download the video below    gt   lt  object gt   lt strong gt Download video  lt  strong gt    lt a href  video mp4  gt MP4 format lt  a gt     lt a href  video ogv  gt Ogg format lt  a gt     lt a href  video webm  gt WebM format lt  a gt   lt  video gt    Important notes     Ended up putting the ogg as the first  lt source gt  because Mac OS Firefox quits trying to play the video if it encounters an MP4 as the first  lt source gt   The correct MIME types are important  ogv files should be video ogg  not video ogv If you have HD video  the best transcoder I ve found for HD quality OGG files is Firefogg The  iphone mp4 file is for iPhone 4  which will only play videos that are MPEG-4 with H 264 Baseline 3 Video and AAC audio  The best transcoder I found for that format is Handbrake  using the iPhone  amp  iPod Touch preset will work on iPhone 4   but to get iPhone 3GS to work you need to use the iPod preset which has much lower resolution which I added as video iphone3g mp4  In the future we will be able to use a media attribute on the  lt source gt  elements to target mobile devices with media queries  but right now the older Apple and Android devices don t support it well enough    Edit    I m still using Video For Everybody but now I ve transitioned to using FlowPlayer  to control the Flash fallback  which has an awesome JavaScript API that can be used to control it

User · Answer

I come with this to change video source dynamically   canplay  event sometime doesn t fire in Firefox so i have added  loadedmetadata   Also i pause previous video if there is one     var loadVideo   function movieUrl        console log  loadVideo           videoLoading show        var isReady   function  event                console log  video isReady event    event type               video removeEventListener  canplay   isReady               video removeEventListener  loadedmetadata   isReady                videoLoading hide                video currentTime   0              video play                       whenPaused   function                 console log  video whenPaused                  video removeEventListener  pause   whenPaused               video addEventListener  canplay   isReady  false               video addEventListener  loadedmetadata   isReady  false      Sometimes Firefox don t trigger  canplay  event                video src   movieUrl     Change actual source                 if  video src  amp  amp   video paused            video addEventListener  pause   whenPaused  false           video pause              else whenPaused

User · Answer

Another way you can do in Jquery   HTML   lt video id  videoclip  controls  controls  poster    title  Video title  gt       lt source id  mp4video  src  video bigbunny mp4  type  video mp4     gt   lt  video gt    lt div class  list-item  gt        lt ul gt            lt li class  item  data-video    video bigbunny mp4  gt  lt a href  javascript void 0   gt Big Bunny  lt  a gt  lt  li gt        lt  ul gt   lt  div gt    Jquery      list-item   find   item   on  click   function             let videoData     this  data  video            let videoSource       videoclip   find   mp4video            videoSource attr  src   videoData           let autoplayVideo       videoclip   get 0           autoplayVideo load            autoplayVideo play

User · Answer

Instead of getting the same video player to load new files  why not erase the entire  lt video gt  element and recreate it  Most browsers will automatically load it if the src s are correct   Example  using Prototype    var vid   new Element  video      autoplay    autoplay    controls    controls      var src   new Element  source      src    video ogg    type    video ogg       vid update src   src insert   before  new Element  source      src    video mp4    type    video mp4             container div   update vid

User · Answer

I hated all these answers because they were too short or relied on other frameworks   Here is  one  vanilla JS way of doing this  working in Chrome  please test in other browsers   http   jsfiddle net mattdlockyer 5eCEu 2   HTML    lt video id  video  width  320  height  240  gt  lt  video gt    JS   var video   document getElementById  video    var source   document createElement  source     source setAttribute  src    http   www tools4movies com trailers 1012 Kill 20Bill 20Vol 3 mp4     video appendChild source   video play     setTimeout function           video pause         source setAttribute  src    http   www tools4movies com trailers 1012 Despicable 20Me 202 mp4          video load        video play       3000

User · Answer

Your original plan sounds fine to me   You ll probably find more browser quirks dealing with dynamically managing the  lt source gt  elements  as indicated here by the W3 spec note      Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect  To change what is playing  just use the src attribute on the media element directly  possibly making use of the canPlayType   method to pick from amongst available resources  Generally  manipulating source elements manually after the document has been parsed is an unncessarily sic  complicated approach    http   dev w3 org html5 spec Overview html the-source-element

User · Answer

Yaur  Although what you have copied and pasted is good advice  this does not mean that it is impossible to change the source element of an HTML5 video element elegantly  even in IE9  or IE8 for that matter   This solution does NOT involve replacing the entire video element  as it is bad coding practice    A complete solution to changing switching videos in HTML5 video tags via javascript can be found here and is tested in all HTML5 browser  Firefox  Chrome  Safari  IE9  etc    If this helps  or if you re having trouble  please let me know

User · Answer

I solved this with this simple method   function changeSource url       var video   document getElementById  video       video src   url     video play

User · Answer

Modernizr worked like a charm for me   What I did is that I didn t use  lt source gt   Somehow this screwed things up  since the video only worked the first time load   was called  Instead I used the source attribute inside the video tag -   lt video src  blabla webm    gt  and used Modernizr to determine what format the browser supported    lt script gt  var v   new Array     v 0               videos video1 webmvp8 webm            videos video1 theora ogv            videos video1 mp4video mp4             v 1               videos video2 webmvp8 webm            videos video2 theora ogv            videos video2 mp4video mp4             v 2               videos video3 webmvp8 webm            videos video3 theora ogv            videos video3 mp4video mp4              function changeVid n       var video   document getElementById  video         if Modernizr video  amp  amp  Modernizr video webm            video setAttribute  src   v n  0          else if Modernizr video  amp  amp  Modernizr video ogg            video setAttribute  src   v n  1          else if Modernizr video  amp  amp  Modernizr video h264            video setAttribute  src   v n  2               video load       lt  script gt    Hopefully this will help you     If you don t want to use Modernizr   you can always use CanPlayType

User · Answer

Using JavaScript and jQuery    lt script src  js jquery js  gt  lt  script gt       lt video id  vid  width  1280  height  720  src  v myvideo01 mp4  controls autoplay gt  lt  video gt      function chVid vid            vid   attr  src  vid          lt div onclick  chVid  v myvideo02 mp4    gt See my video  2  lt  div gt

User · Answer

This is my solution    lt video id  playVideo  width  680  height  400  controls  controls  gt       lt source id  sourceVideo  src    video videoHigh    type  video mp4  gt   lt  video gt       lt br   gt   lt button class  btn btn-warning  id    video videoHigh    onclick  changeSource this   gt HD lt  button gt   lt button class  btn btn-warning  id    video videoLow    onclick  changeSource this   gt Regular lt  button gt    lt script type  text javascript  gt      var getVideo   document getElementById  playVideo        var getSource   document getElementById  sourceVideo        function changeSource vid            var geturl   vid id          getSource  setAttribute  src   geturl           getVideo  load           getVideo  play            getVideo  volume   0 5         lt  script gt

User · Answer

I have a similar web app and am not facing that sort of problem at all   What i do is something like this   var sources   new Array     sources 0     path to file mp4 sources 1     path to another file ogg etc     then when i want to change the sources i have a function that does something like this   this loadTrack   function track   var mediaSource   document getElementsByTagName  source   0   mediaSource src   sources track        var player   document getElementsByTagName  video   0       player load         I do this so that the user can make their way through a playlist  but you could check for userAgent and then load the appropriate file that way   I tried using multiple source tags like everyone on the internet suggested  but i found it much cleaner  and much more reliable to manipulate the src attribute of a single source tag   The code above was written from memory  so i may have glossed over some of hte details  but the general idea is to dynamically change the src attribute of the source tag using javascript  when appropriate

[javascript] changing source on html5 video tag

Examples related to javascript

Examples related to html

Examples related to video

Examples related to load