Tierra Innovation

Tierra Lab

«
»

How to change the src attribute in a HTML5 video tag

So imagine you have a HTML5 video tag on your page running on autoplay and you want to switch the video out with another one.   So you figure, “I’ll just change the ‘src’ attribute via javascript and like an image tag it will start playing the new video”.  Nope.  After fruitlessly searching for a solution via Google or directly on StackOverflow I decided to dig in and read the HTML5 video docs.  Here is what I came up with:

function switchVideo(videoTagId, newUrl) {
  var videoTag = document.getElementById(videoTagId);
  if (videoTag) {
    videoTag.pause();
    videoTag.src = newUrl;
    videoTag.load();
    // the .play() call might not be needed if your video tag
    // is set for autoplay but it can't hurt to call it
    videoTag.play();
  }
}

Add a comment if you have a different way to do the same thing.  I’m curious.

Bookmark and Share

This entry was posted on Friday, April 2nd, 2010 at 8:39 am . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “How to change the src attribute in a HTML5 video tag”

  1. Joshua Hatfield Says:
    April 2nd, 2010 at 2:48 pm

    jQuery plugin (I think this works):

    (function($){
    $.fn.switchvid = function(options) {

    var defaults = {
    newURL: ”
    };
    var options = $.extend(defaults, options);

    $(this).pause();
    $(this).src = options.newURL;
    $(this).load();
    };
    })(jQuery);

    Use it like this:

    $(document).ready(function(){
    $(‘#element’).switchvid();
    });

  2. Gabriel Says:
    September 19th, 2011 at 9:55 am

    look at this post:

    http://stackoverflow.com/questions/5703203/html5-video-change-multiple-sources

    nice and simple solution!

Leave a Reply

Copyright © 2012 Tierra Innovation, Inc.