The demo is here https://jsfiddle.net/r9u1cn7o/
as a pop-up pop-up to play the corresponding video screen by clicking on different tabs, but the src value is successfully assigned through jquery, but I don’t know why it can’t be played?

<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();
});

Through jQuery, it is true that the assignment of the src of the source is successful.From the debugging point of view, the browser did not initiate a request to obtain the corresponding video, but simply assigned the value in the data-src of the a tag to the source.

But if you do this, the browser will go to the request address to get the video file:

$(".dj").on("click", function() {
    var src = $(this).data("src"),
        sourceDom = $("<source src=\""+ src +"\">");
       
    $("#video-box video").append(sourceDom);
    $("#video-box").show();
   
    // Autoplay
    $("#video-box video")[0].play()
});

Therefore, it can be inferred that when there is a source tag in the video, the browser will automatically get the address after rendering.Even if the address changes, the browser will not get the address again. But by dynamically inserting the source tag, the browser can be triggered to rearrange, so as to obtain the file with the corresponding address for playback.