Блог

Я хотел бы автоматически воспроизвести видео во всплывающем окне, как только пользователь нажмет «посмотреть видео». Прямо сейчас мой код отлично работает на рабочем столе, но на мобильном устройстве (IOS) iframe видео открывается, но не воспроизводится автоматически. В настоящее время я использую модальный загрузчик и подключаю и удаляю источник видео в событиях щелчка, как это:

 lt;a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"gt; Watch Video lt;/agt;  lt;div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog modal-lg modal-dialog-centered" role="document"gt;  lt;div class="modal-content"gt;  lt;iframe width="100" height="180" id="myVideo" src="../static/img/videos/Whatsfordinner with filter.mp4" frameborder="0" allow="autoplay" allowfullscreengt;lt;/iframegt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

 $(document).ready(function(){   // Save the url of the video in a variable  var url = $("#myVideo").attr('src');   // When the modal is closed remove the url of the iframe  $("#videoModal").on('hide.bs.modal', function(){  $("#myVideo").attr('src', '');  });   // When the modal is opened, add the url to the iframe  $("#videoModal").on('show.bs.modal', function(){  $("#myVideo").attr('src', url);  }); });  

Должен ли я использовать другое решение?

Я понял это сейчас — вам нужно использовать видео вместо iframe. Вот мой код для тех, кто заинтересован:

 lt;a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"gt;  lt;div class="watch-now"gt;  lt;img src="../static/img/Watch_Video.png" alt="Watch Video"gt;  lt;/divgt; lt;/agt;   lt;div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog modal-dialog-centered" role="document"gt;  lt;div class="modal-content"gt;  lt;video autoplay playsinline id="myVideo"gt;  lt;source src="../static/img/videos/Whatsfordinner with filter.mp4" type="video/mp4"gt;  lt;/videogt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

 $(document).ready(function(){   // Save the url of the video in a variable  var url = "../static/img/videos/Whatsfordinner with filter.mp4";   // When the modal is closed remove the url of the iframe  $("#videoModal").on('hide.bs.modal', function(){  $("#myVideo").attr('src', '');  });   // When the modal is opened, add the url to the iframe  $("#videoModal").on('show.bs.modal', function(){  $("#myVideo").attr('src', url);  });  

Надеюсь, это кому-нибудь поможет!