switch video dynamically

Only the src-attribute of the source-element is changed. Works in Chrome, but not on Safari and on iPad.

by Jens Grochtdreis

HTML

<div id="main">
    <video id="video" autobuffer controls>
        <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
</div>
<div id="footer">
     <ul class="noList control">
         <li><button data-movie="sintel_trailer">Sintel Trailer</button></li>
         <li><button data-movie="big-buck-bunny">Big Buck Bunny</button></li>
     </ul>
 </div>

CSS

#main, #footer {width: 600px;margin: 20px auto 0 auto;}
#video {width: 480px;}
.noList { list-style-type: none; padding: 0; margin: 0;}
.control { float: left;}
.control li { float: left;}
.control button {
  background-color: #a20000;
  color: #fff;
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  cursor: pointer;
}

JavaScript

// Only the src-attribute of the source-element is changed.
// Works in Chrome, but not on Safari and on iPad.

$(".control button").on("click", function(e) {
  var videoname = $(this).attr("data-movie");
  $("#mp4").attr("src","http://grochtdreis.de/fuer-jsfiddle/video/"+ videoname +"-480.mp4");
  $("#video").load();
});