动态更改 Bootstrap 模态视频源

Question

我有一个数据库保存视频 src 和一些关于视频的信息。

我通过 while 循环获取这些变量并传递给 jquery 脚本，但即使视频的 src 属性正确，视频也不会播放新源 link。

中给出的代码我在页面中使用的

<div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
  <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598947286183946/vid/720x900/Jg8plRtix-yjzP6g.mp4">
    <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598947286183946/img/_WUUCNjodgFAwfdw.jpg:thumb" alt="9GAG">
  </a>
</div>

**This is my Modal HTML**

<div id="myVideo">
    <video id="myVideo" width="1280" height="720" controls poster="" class="myvideo img-fluid">
        <source src="" type="video/mp4">
    </video>
</div>

这是JS

    $('#exampleModal').on('show.bs.modal', function (event) {
       var button = $(event.relatedTarget)
       var link = button.data('link')
       var user = button.data('user')
       var modal = $(this)
       moda1l.find('.modal-title').text(user)
       modal.find('.video source').attr('src', link)
    })

我在主题中搜索了解决方案，有一些类似的问题和解决方案，但作为菜鸟，我无法将这些解决方案应用到我的代码中。在此先感谢您的帮助。

--求解后编辑-- 我最终的js代码是这样的：

//to pause the video if modal closed
$('#exampleModal').on('hide.bs.modal', function (event) {
   let video = document.getElementById('myVideo');
   video.pause();
});
$('#exampleModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var link = button.data('link')
   var user = button.data('user')
   var modal = $(this)
   modal.find('.modal-title').text(user)
   $('#myVideo source').attr('src', link)
   $('#myVideo')[0].load();
   //autoplay if modal opened
   $('#myVideo')[0].play();
})

Answer 1

简单的每次更改 src 都应该加载视频，使用媒体加载 load(), 如果你想在节目中启动它，只需在视频上触发 play()，如下所示：

let video = $("#myVideo").get(0);
video.load();
video.play();

查看工作片段：

$(function() {
  $('#exampleModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget)
    var link = button.data('link')
    var user = button.data('user')
    var modal = $(this)
    modal.find('.modal-title').text(user)
    modal.find('.video source').attr('src', link)
    let video = $("#myVideo").get(0);
    video.load();
    video.play();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-3">
  <div class="row justify-content-center">
    <div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
      <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="KediOzelHarecat" data-link="https://video.twimg.com/ext_tw_video/1346103833966088192/pu/vid/540x960/xXK63BN2krMPIdjw.mp4">
        <img class="rounded" src="https://pbs.twimg.com/ext_tw_video_thumb/1346103833966088192/pu/img/-gaHCYlnfVvdjmC4.jpg:thumb" alt="KediOzelHarecat">
      </a>
    </div>
    <div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
      <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598947286183946/vid/720x900/Jg8plRtix-yjzP6g.mp4">
        <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598947286183946/img/_WUUCNjodgFAwfdw.jpg:thumb" alt="9GAG">
      </a>
    </div>
    <div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
      <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598894937075723/vid/1280x720/vY1Ol_rQMw-jod60.mp4">
        <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598894937075723/img/sMJ2oEi3Iws6oCqM.jpg:thumb" alt="9GAG">
      </a>
    </div>
  </div>
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">User Screen Name</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body justify-content-center">
          <div class="video" id="divVideo">
            <video id="myVideo" width="1280" height="720" controls poster="" class="myvideo img-fluid">
              <source src="" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 2

源的选择器需要更改，然后加载（）视频...

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var link = button.data('link')
    var user = button.data('user')
    var modal = $(this)
    modal.find('.modal-title').text(user)
    $('#myVideo source').attr('src', link)
    $('#myVideo')[0].load();
})

Demo

动态更改 Bootstrap 模态视频源

Change Bootstrap modal video source dynamically

javascript

jquery

html5-video

twitter-bootstrap

bootstrap-modal