jQuery上的Bootstrap 4模式视频-使代码干燥

我在一个页面上有几个视频。它们都在Bootstrap4Modals中，所以我必须找到一些代码，在每个视频作品显示modal后自动播放。（如果我同时选择所有视频，它们将立即播放和暂停。） 因此，我产生了一些非常湿的代码

我想把这个弄干：

// Makes video1 play after modal is shown and pause video when the modal is closed
$('#video1').on('shown.bs.modal', function() {
  $('#autoplay-video1')[0].play();
})
$('#video1').on('hidden.bs.modal', function() {
  $('#autoplay-video1')[0].pause();
})

// video 2
$('#video2').on('shown.bs.modal', function() {
  $('#autoplay-video2')[0].play();
})
$('#video2').on('hidden.bs.modal', function() {
  $('#autoplay-video2')[0].pause();
})

// video 3
$('#video3').on('shown.bs.modal', function() {
  $('#autoplay-video3')[0].play();
})
$('#video3').on('hidden.bs.modal', function() {
  $('#autoplay-video3')[0].pause();
})

// video 4 ... (etc.)

使用“开始于”选择器可能适用于您：

$（'[id^=video]'）。on（'show.bs.modal'，function（）{
$（'#自动播放-'+$（this.attr（'id'））[0.play（）；
})
$（'[id^=video]'）。on（'hidden.bs.modal'，function（）{
$（'#自动播放-'+$（this.attr（'id'））[0]。暂停（）；
})

但如果您有其他id以“video”开头的元素，则可能会中断，如：

…

因此，我建议使用自定义数据属性来避免这些问题：

…

$（“[数据视频]”）.on（'show.bs.modal'，function（）{
$（'#自动播放视频'+$（this）.attr（'data-video'））[0].play（）；
})
$（“[数据视频]”）.on（'hidden.bs.modal'，function（）{
$（'#自动播放视频'+$（this）.attr（'data-video'））[0]。暂停（）；
})

我已经尝试了你的两个建议，尽管我没有任何其他ID为“video”的元素（我只是让我独特的video ID听起来更中性，这样我就不会用奇怪的名字混淆任何人）。比起ID，我更喜欢上课。用你的干法解决方案，自动播放不再适用于我。您能告诉我您将使用哪种HTML标记吗？这是我的HTML，jQ+你的第二个解决方案：我如何避免给我所有的视频提供相同的ID？我会使用一个类。在模式上设置

data video=“1”

，而不是在视频上。然后使用

让我的代码采样到模态和视频之间的链接。但是如果每个模态都有一个视频，那么还有更简单的方法：

$（'.modal vide'）.on（'show.bs.modal'，function（）{$（this.find（'video'）[0].play（）；}）

。只需在你的modals上添加一个

模态视频

，然后搜索其中的第一个视频标签。谢谢，但我尝试了各种组合。这些对我都不管用。