通过jquery动态的设置video src的值无法播放视频？

Question

<div id="video-box">

 <video style="object-fit: fill;width: 200px;height: 50px;" controls>

    <source src="">

  </video>

</div>

<a class="dj" href="javascript:;" data-src="http://www.w3school.com.cn/i/movie.mp4">点击</a> 

*{padding:0;margin:0;}

#video-box{display:none;}

$(".dj").on("click", function() {

   var src = $(this).data("src");

   $("#video-box source").prop("src",src)

   $("#video-box").show();

});

demo在这里https://jsfiddle.net/r9u1cn7o/
作一个通过点击不同的标签弹出弹框播放相应的视屏，但是通过jquery成功的给src赋值了，但是不知道为什么播放不了？