javascript - 为什么当 src 在 bootstrap 4 模态中使用 jQuery 是动态的时 HTML5 视频标签不起作用？

Question

我有一个 HTML5 视频 URL，当我点击它然后打开一个具有相同 HTML 5 视频 URL 的 bootstrap 4 模态时，它不起作用。

但是当我将其设置为静态(模态中的直接路径)时，它就可以工作了。

我尝试了什么:-

   
 $(document).ready(function(){
 $('.videoListUrl').click(function () {
               var videoTitle = $(this).find('.videoTitle').text();
               var videoUrl = $(this).find('.videoUrl').text();
               $('#videoModal').find('.modal-title').text(videoTitle);
               $('#videoModal').find('#paidVideos').find('source').attr('src', videoUrl);
               $('#videoModal').modal('show');
 });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="videoListUrl">
                          
                                   <div class="videoUrl">https://www.w3schools.com/html/mov_bbb.mp4</div>
                              
                       </div>
         
         
 
    <div class="modal" id="videoModal">
       <div class="modal-dialog modal-lg">
           <div class="modal-content">

               <!-- Modal Header -->
               <div class="modal-header">
                   <h4 class="modal-title"><%=dsCourseDetail.Tables[0].Rows[i]["VideoTitle"].ToString()%></h4>
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>

               <!-- Modal body -->
               <div class="modal-body">
                   <div class="primary-video">

                       <video id="paidVideos"  width="400" controls="controls">
                           <source src="" />
                       </video>

                   </div>
               </div>

           </div>
       </div>
   </div>
    

我们将不胜感激!

Answer 1

检查下面的代码片段，将视频 url 动态添加到视频标签。

$('.videoListUrl').click(function () {
    var videoTitle = $(this).find('.videoTitle').text();
    var videoUrl = $(this).find('.videoUrl').text().trim();
    $('#videoModal').find('.modal-title').text(videoTitle);
        
    var video = document.getElementById('paidVideos');
    var source = document.createElement('source');
    source.setAttribute('src', videoUrl);

    video.appendChild(source);
    video.play();
        
    $('#videoModal').modal('show');
 });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="videoListUrl">
	<div class="videoUrl">https://www.w3schools.com/html/mov_bbb.mp4</div>
</div>
        
    <div class="modal" id="videoModal">
       <div class="modal-dialog modal-lg">
           <div class="modal-content">

               <!-- Modal Header -->
               <div class="modal-header">
                   <h4 class="modal-title"></h4>
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>

               <!-- Modal body -->
               <div class="modal-body">
                   <div class="primary-video">

                       <video id="paidVideos" width="400" controls="controls">
                       </video>

                   </div>
               </div>

           </div>
       </div>
   </div>