#javascript #jquery #twitter-bootstrap #html5-video #bootstrap-modal
#javascript #jquery #twitter-bootstrap #html5-видео #загрузочный модальный
Вопрос:
У меня есть база данных, в которой хранятся видео 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();
})
Комментарии:
1. источник видео не кажется динамичным, поскольку исходное значение поступает из атрибута данных в кнопке!
2. Привет, попробуйте сделать это с помощью iframe.
3. @AhmadKarimi он поступает из базы данных. При каждом щелчке по миниатюре в скрипт добавляется новый источник.
4. @Swati Он (вроде) работает с iframes, но для каждого клика создается новая перезагрузка. Например, если вы смотрите 5 видео, вам нужно нажать кнопку «Назад» пять раз, чтобы перейти на предыдущую страницу. Также, когда модальный закрыт, он продолжает воспроизводиться. Не было бы сложно управлять видео iframe для приостановки при нажатии кнопки закрыть или где-нибудь еще, чтобы остановить его?
Ответ №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();
})
Комментарии:
1. Работал отлично. Также я добавил в последнюю строку $(‘#MyVideo’)[0].play(); для автозапуска.
Ответ №2:
Просто каждое изменение для src должно загружать видео, используя медиа load 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">amp;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>