动态更改引导模式视频源

Question

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

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

我使用了Bootstrap Docs 中给出的代码

这是我在页面中使用的代码

<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

源的选择器需要更改，然后加载((视频。。。

$('#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();
})

演示

Answer 2

src的每次更改都应该使用media load((加载视频，如果你想在节目中开始，只需在视频中触发播放((如下：

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>