Html Chrome在创建并销毁<；视频>；标签

我正在创建一个视频库。每当用户点击缩略图时，页面上就会动态添加一个“视频”元素，让用户观看视频（我已经尝试过显示/隐藏视频，但是chrome加载页面的速度很慢，所以我选择了动态方法）。问题是，如果用户关闭视频（销毁“视频”元素）并单击相同的缩略图（从而重新创建“视频”元素），Chrome会生成一个新的web请求来下载视频，但该请求在队列中会挂起，因为服务器每次只允许对每个文件和每个IP请求一次（由于上次打开视频导致视频被下载）。Firefox中不会出现这种情况，浏览器不会重新下载视频，而是重复使用以前下载的…
有没有避免这种情况的方法？
多谢各位

更新

下面是我用来添加的代码：

$(this).find(".gallery > li").append("<video id=\"articlevideoobj\" class=\"videoProd\" preload=\"none\" controls=\"true\"><source src=\"" + video_src + ".mp4\" type=\"video/mp4\"><source src=\"" + video_src + ".ogg\" type=\"video/ogg\"</video>");

---

在删除视频之前，对视频对象调用.stop（）方法并将src设置为“”：

---

在删除视频之前，对视频对象调用.stop（）方法并将src设置为“”：

---

你会给出你用来添加“视频”元素的代码吗？是的，我更新了问题阅读，你会给出你用来添加“视频”元素的代码吗元素？是的，我更新了问题阅读，我正在尝试这种方法：几分钟后我会让你知道。顺便说一下，官方标签中没有“停止”方法。你必须使用“暂停”。我的意思是暂停，抱歉输入错误。我正在尝试这种方法：几分钟后我会让你知道。顺便说一句，官方标签中没有“停止”方法。你我必须用“暂停”。我的意思是暂停，抱歉输入错误

if (video_mode) {
    $('#articlevideoobj').remove();
}

 function stopVideo(elementId)
 {
   var video = document.getElementById(elementId);

   video.pause();
   video.src = '';
   video.parentNode.removeChild(video);
 }