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

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 <source> 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:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <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}]}" />
    <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" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

Important notes:

Ended up putting the ogg as the first <source> because Mac OS Firefox quits trying to play the video if it encounters an MP4 as the first <source>.
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 & 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 <source> 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[javascript] changing source on html5 video tag

Examples related to javascript

Examples related to html

Examples related to video

Examples related to load