第二个视频在第一个视频播放之前无法播放

Question

我有两个动态创建的视频文件：

$.each(data.reports, function(i, report) {
       var video = document.createElement("video");
       video.setAttribute('src', 'friday.mp4');
       video.setAttribute('type', 'video/mp4');
       document.getElementById("Data").appendChild(video);
       $('video').prop("controls", true);
       $('video').prop("width", 400);
})

如果我按下第一个视频的播放按钮，一切都很好。如果我先按第二个视频（在按第一个视频之前），直到我按下第一个视频。

为什么会出现问题？我试着在网上搜索，但没有成功。。

提前感谢！

Answer 1

在追加到"#Data"div$（"video"）之前，您应该将controls和width属性设置在循环之外，或者通过video.setAttribute调用来设置这些属性。$针对所有视频元素，因此在循环内部调用会导致不必要且错误的多重绑定

$.each（data.reports，function（i，report）｛

   var video = document.createElement("video");
   video.setAttribute('src', 'friday.mp4');
   video.setAttribute('type', 'video/mp4');
   document.getElementById("Data").appendChild(video);

})；

$（"video"）.prop（"controls"，true）；

$（'video'）.prop（"width"，400）；