switch video dynamically

source-element is removed then a new one is written works in Chrome but not in Safari

HTML

<div id="main">
    <video id="video" autobuffer controls>
        <source id="mp4" src="https://thefiletree.com/casssandra/digimon.MP4" type="video/mp4">
    </video>
</div>
<div id="footer">
     <ul class="noList control">
         <li><button data-movie="digimon">Digimon</button></li>
         <li><button data-movie="khabar">Khabar Dari Casablanca</button></li>
         <li><button data-movie="casa">Dont Leave Me</button></li>
         <li><button data-movie="sayap">Patahnya Sebelah Sayap</button></li>
     </ul>
 </div>
 <br>
 <br> <center>Click Title and Click Play<br>
 <br>Enjoy The Show<br>
 <br>Thanks For Watching<br>
 <br>Have A Nice Days

CSS

#main, #footer {width: 600px;margin: 30px auto 0 auto;}
#video {width: 600px;}
.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

// source-element is removed then a new one is written
// works in Chrome but not in Safari

$(".control button").on("click", function(e) {
  var videoname = $(this).attr("data-movie");
  var videoelement = $("#video");
  var newvideo =  "<source id='mp4' src='https://thefiletree.com/casssandra/"+videoname+".MP4' type='video/mp4'>";
  $("#video source").remove();
  videoelement.prepend(newvideo);
  videoelement.load();
});