Me gustaría reproducir automáticamente un video en una ventana emergente una vez que el usuario haga clic en "ver video". En este momento, mi código funciona bien en el escritorio, pero en el dispositivo móvil (IOS), el iframe del video se abre pero no se reproduce automáticamente. Actualmente estoy usando un modal de arranque y adjuntando y eliminando la fuente de video en los eventos de clic, así:
<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"> Watch Video </a> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"> <iframe width="100" height="180" id="myVideo" src="../static/img/videos/Whatsfordinner with filter.mp4" frameborder="0" allow="autoplay" allowfullscreen></iframe> </div> </div> </div> $(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); }); });¿Debería usar una solución diferente?
Lo descubrí ahora: debe usar video en lugar de iframe. Aquí está mi código para los interesados:
<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"> <div class="watch-now"> <img src="../static/img/Watch_Video.png" alt="Watch Video"> </div> </a> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <video autoplay playsinline id="myVideo"> <source src="../static/img/videos/Whatsfordinner with filter.mp4" type="video/mp4"> </video> </div> </div> </div> $(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); });¡Espero que esto ayude a alguien por ahí!